如何使用边境引导(How to use border with Bootstrap)

我怎么解决这个问题？当您添加边框股利，股利不居中和span12类不居中。

我想中心与边界的格

<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 。这是几乎相同的边界。唯一的区别是，它的表现更像，它不占用空间布局的box-shadow，它必须是该元素的所有4个方面。

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

.foo {
    outline: 1px solid orange;
}

Answer 2:

自举3，你可以使用面板类：

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

Answer 3:

有称为CSS属性box-sizing. 它决定了你的页面上的元素的总宽度。默认值是content-box ，其中不包括填充，保证金，或元素的边界。

因此，如果你设置一个div有width: 500px和20px填充周围的一切，它会占用540px在您的网站（500 + 20 + 20）。

这是什么原因造成您的问题。引导计算的东西，就像上面的例子中设置宽度，而这些东西没有国界。由于引导组合在一起就像一个谜，添加边框的两侧中的一侧将产生501px总宽度（继续上面的例子），打破你的布局。

解决这个问题的最简单的方法是调整你的box-sizing 。你会使用的值是box-sizing: border-box 。这包括你的盒子元素的填充和边框。你可以阅读更多关于对话框上浆这里。

该解决方案的问题是，它仅适用于IE8 +。因此，如果您需要更深入的IE支持，你需要重写引导宽度占你的边界。

为了举例说明如何计算新的宽度的例子，通过检查引导设置你的元素的宽度开始。比方说，这是一个span6并具有宽度320px （这是纯属假设，你span6的实际宽度将取决于引导您的具体配置）。如果你想在右手边有一个20像素的填充那边添加一个边框，你会写在CSS样式表

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

其中新的宽度由下式计算：

old width - padding - border

Answer 4:

根据你想你什么尺寸div是，你可以利用自举的内置组件thumbnail类，有（或没有）的电网系统围绕每个创造边界沿着div项目。

这些例子在引导的网站展示了易于使用和缺乏必要进行特别的额外的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:

什么其他人所说的关于边境VS边框框肯定是正确的。你仍然可以得到这个工作，而无需创建虽然任何自定义类： 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:

你不能只添加边框的范围，因为这将打破布局，因为道路宽度的计算是：宽=边框+填充+宽度。由于容器是940px和跨度为940px，加上2px的边框（因此总共4像素），使其看起来偏离中心。解决方法是改变宽度包括4像素边界（原 - 4像素）或具有其他DIV中创建的2px的边框。

Answer 8:

如果你需要一个基本的边框，你只需要使用自举井。

例如下面的代码：

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

文章来源: How to use border with Bootstrap