Question

我有一个＆＃34;联系我们＆＃34;嵌套在使用Bootstrap的页面上的div中的元素。

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

我将元素放入index.html页面，因为我的计划是将其转换为模态。查看页面，contact-us表单是不正确的宽度导致内容错位。我知道bootstrap是罪魁祸首，因为当我注释掉bootstrap的cdn链接时，请联系我们＆＃34;表单完全按照预期显示。我试图使用检查器来改变div的宽度，但它不允许它。当我按Enter键或使用鼠标单击尺寸标注时，检查器中显示的计算宽度会立即恢复为相同的尺寸。

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

<?php

foreach($lessons as $lesson) { echo "<h1>$lesson</h1>"; }

?>

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

https://jsfiddle.net/htL0vrfL/

Answer 1

您遇到的问题是bootstrap将box-sizing设置为border-box以获取元素。从那时起，div将具有575px的确切宽度，但您希望它具有575px的内部宽度（同样适用于您的身高）

如果您想更改此行为，则需要在box-sizing Updated fiddle上将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

Answer 2

通过注释掉这些行，您的表单看起来似乎正确，激活了bootstrap。

/* -webkit-box-sizing: border-box; */
/* -moz-box-sizing: border-box; */
/* box-sizing: border-box; */

正如评论中所提到的，我们通过创建一个覆盖上述规则的类来解决这个问题。

.nonborderbox * { 
  -webkit-box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  box-sizing: content-box; 
}

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

2 个答案: