Question

我该如何解决这个问题？向div添加边框时，div不居中 span12类不居中。

我想将div与边框居中

<div class="row" >
   <div class="span12" style="border: 2px solid black">
      <div class="row">
         <div class="span4">
            1
         </div>
         <div class="span4">
            2
         </div>
         <div class="span4">
            3
         </div>
      </div>
   </div>
</div>

Answer 1

不幸的是，这就是边界所做的，它们被视为一个元素所占据的空间的一部分。请允许我介绍边境不太为人所知的堂兄：outline。它几乎与边界相同。唯一不同的是，它的行为更像是盒子阴影，因为它不占用布局中的空间，而且必须位于元素的所有4个边上。

http://codepen.io/cimmanon/pen/wyktr

.foo {
    outline: 1px solid orange;
}

Answer 2

CSS中有一个名为box-sizing.的属性它确定了页面上元素的总宽度。默认值为content-box，不包括元素的填充，边距或边框。

因此，如果您将div设置为width: 500px和20px填充，则会占用您网站上的540px（500 + 20 + 20）

这就是造成问题的原因。 Bootstrap计算事物的设置宽度，就像上面的例子一样，这些东西没有边框。由于Bootstrap像拼图一样拼凑在一起，因此在其中一个边上添加边框会产生501px的总宽度（继续上面的示例）并打破布局。

解决此问题的最简单方法是调整box-sizing。您将使用的值是box-sizing: border-box。这包括框元素中的填充和边框。 You can read more about box-sizing here.

此解决方案的一个问题是它仅适用于IE8 +。因此，如果您需要更深入的IE支持，则需要覆盖Bootstrap宽度以考虑边界。

举一个如何计算新宽度的例子，首先检查Bootstrap在元素上设置的宽度。假设它是span6并且宽度为320px（这纯粹是假设的，span6的实际宽度将取决于您的Bootstrap的特定配置）。如果你想在右侧添加一个带有20px填充的边框，你可以在样式表中编写这个CSS

.span6 {
  padding-right: 20px;
  border-right: 1px solid #ddd;
  width: 299px;
 }

新宽度的计算方法是：

old width - padding - border

Answer 3

根据您希望div的大小，您可以使用Bootstrap的内置组件thumbnail类，以及（或不使用）网格系统来创建每个div周围的边框。 1}}项目。

Bootstrap网站上的

These examples演示了易用性，并且不需要任何特殊的附加CSS：

<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    ...
</div>

会生成以下div网格项：

或添加一些其他内容：

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p>
            <a href="#" class="btn btn-primary" role="button">Button</a>
            <a href="#" class="btn btn-default" role="button">Button</a>
       </p>
      </div>
    </div>
  </div>
</div>

会生成以下div网格项：

Answer 4

其他人提到的关于边界与边界框的内容绝对是正确的。您仍然可以在不创建任何自定义类的情况下使其工作：http://jsfiddle.net/panchroma/yfzdD/

HTML

<div class="container">
<div class="row" >
    <div class="span12">
       <div class="row">
        <div class="span4"> 1 </div>
        <div class="span4"> 2 </div>
        <div class="span4"> 3 </div>
        </div><!-- end nested row -->
    </div><!-- end span 12 -->

</div> <!-- end row -->
</div><!-- end container -->

CSS

.span12{
border:solid 2px black;
background-color:grey;  
}

祝你好运！

Answer 5

虽然它可能不是正确的方式，但我发现这是一个简单的解决方法就是简单地使用盒子阴影而不是边框...这不是'打破网格系统。例如，在您的情况下：

<强> HTML

<div class="container">
    <div class="row" >
        <div class="span12">
            <div class="row">
                <div class="span4">
                    1
                </div>
                <div class="span4">
                    2
                </div>
                <div class="span4">
                    3
                </div>
            </div>
        </div>
    </div>
</div>

<强> CSS

.span12{
    -moz-box-shadow: 0 0 2px black;
    -webkit-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
}

Fiddle

Answer 6

您不能只为边距添加边框，因为它会因为计算宽度的方式而破坏布局：width = border + padding + width。由于容器是940px，跨度是940px，添加2px边框（所以总共4px）将使它看起来偏离中心。解决方法是更改宽度以包括4px边框（原始 - 4px）或在内部创建另一个div来创建2px边框。

Answer 7

如果您需要周围的基本边界，则只需使用自举井即可。

例如下面的代码：

<div class="well">Basic Well</div>

Answer 8

如果您使用的是Bootstrap 4及更高版本，请尝试使用此方法在空div周围放置边框，请使用border border-primary，这是我的代码示例：

<div class="row border border-primary">
        <div class="col border border-primary">logo</div>
        <div class="col border border-primary">navbar</div>
    </div>

以下是Bootstrap 4中border工具的链接： https://getbootstrap.com/docs/4.2/utilities/borders/

如何使用Bootstrap边框

8 个答案: