如何使用Bootstrap边框

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

从Bootstrap 3开始,您可以使用Panel类:

<div class="panel panel-default">Surrounded by border</div>

Answer 3

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

因此,如果你设置一个div包含width: 500px和20px填充,它将占用540px你的网站(500 + 20 + 20).

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

解决这个问题的最简单方法是调整你的box-sizing.你要使用的价值是box-sizing: border-box.这包括框元素中的填充和边框.您可以在此处阅读有关盒子大小的更多信息.

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

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

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

其中新宽度的计算方法是:

old width - padding - border

Answer 4

根据您希望的大小div,您可以使用Bootstrap的内置组件thumbnail类,以及(或不使用)网格系统在每个div项目周围创建边框.

Bootstrap网站上的这些示例演示了易用性和不需要任何特殊附加功能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 5

其他人提到的关于边界与边界框的内容绝对是正确的.你仍然可以在不创建任何自定义类的情况下使用它: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 6

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

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;
}

小提琴

Answer 7

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