Bootstrap不允许我将自己的维度添加到div

Question

我有一个"contact-us"元素嵌套在使用Bootstrap的页面上的div中.

我在一个单独的html页面上设置div中的元素,它完全按照预期工作.

我将元素放入index.html页面,因为我的计划是将其转换为模态.查看页面,contact-us表单是不正确的宽度导致内容错位.我知道bootstrap是罪魁祸首,因为当我注释掉bootstrap的cdn链接时,"contact us"表单就像它应该的那样出现.我试图使用检查器来改变div的宽度,但它不会允许它.当我按Enter键或使用鼠标单击尺寸标注时,检查器中显示的计算宽度会立即恢复为相同的尺寸.

如何强制div响应,好像bootstrap没有控制它？在尺寸上使用!important什么都不做.以下是我在div上使用的css,它在没有启用引导程序的页面上完美运行.

.contact-us {
    height: 400px;
    min-width: 575px !important;
    width: 575px !important;
    padding: 10px 20px 20px 10px;
    background-color: #44C1FB;
    border: 1px solid black;
    border-radius: 5px;
    color: white;
}

这是jfiddle链接.如果删除html文件最顶部的bootstrap cdn链接,它可以正常工作.

https://jsfiddle.net/htL0vrfL/

Answer 1

你的问题是,引导套box-sizing到border-box的元素.作为该的div将有确切的宽度575px,但你希望它有一个内部宽度的575px(同样是你的高度).

如果你想改变这种行为,你需要设置box-sizing到content-box你的.contact-us 更新小提琴.

.contact-us {
  box-sizing: content-box; /**   change box sizing to content-box **/
  -webkit-box-sizing: content-box; /** only needed for Chrome before version 10 **/
  -moz-box-sizing: content-box; /** only needed for FireFox before version 29 **/
  height: 400px;
  min-width: 575px !important;
  width: 575px !important;
  padding: 10px 20px 20px 10px;
  background-color: #44C1FB;
  border: 1px solid black;
  border-radius: 5px;
  color: white;
}

或者,如果你想留border-box那么你就需要将添加padding到您的width和height.

除此之外,它可能是一个更好的解决方案,不设置width和height根本,但display: inline-block用于你的.contact-us