html - Bootstrap 不允许我将自己的尺寸添加到 div

Question

我有一个“contact-us”元素，它嵌套在使用 Bootstrap 的页面上的 div 中。

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

我将该元素放入我的index.html 页面中，因为我的计划是将其转换为模式。查看页面，联系我们表单的宽度不正确，导致内容未对齐。我知道 bootstrap 是罪魁祸首，因为当我注释掉 bootstrap 的 cdn 链接时，“联系我们”表单完全按照预期显示。我尝试使用检查器来更改 div 的宽度，但它不允许这样做。当我按 Enter 或使用鼠标单击尺寸时，检查器中显示的计算宽度立即恢复为相同尺寸。

如何强制 div 做出响应，就好像 bootstrap 没有控制它一样？在尺寸上使用 !important 没有任何作用。以下是我在 div 上使用的 css，它在未启用 Bootstrap 的页面上完美运行。

.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

您遇到的问题是 Bootstrap 将元素的 box-sizing 设置为 border-box 。此时，div 的精确宽度将为 575px，但您希望它的内部宽度为 575px >(您的高度也是如此)。

如果您想更改此行为，您需要将 .contact-us Updated fiddle 上的 box-sizing 设置为 content-box 。

.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