69

我怎么解决这个问题？给 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>
4

9 回答 9

77

不幸的是，这就是边框的作用，它们被视为元素占用空间的一部分。请允许我介绍一下 Border 鲜为人知的表亲： outline. 它实际上与边界相同。唯一的区别是它的行为更像 box-shadow，因为它不占用布局中的空间，并且它必须位于元素的所有 4 个侧面。

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

.foo {
    outline: 1px solid orange;
}
于 2013-03-10T23:29:47.593 回答
42

从 Bootstrap 3 开始，您可以使用 Panel 类：

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

在 Bootstrap 4 中，您可以使用 Border 类：

<div class="border border-secondary">Surrounded by border</div>

于 2016-08-15T21:40:34.243 回答
17

CSS 中有一个属性叫做box-sizing.它决定页面上元素的总宽度。默认值为content-box，不包括元素的内边距、边距或边框。

因此，如果您将 a 设置div为拥有width: 500px和20px填充，它将占据540px您的网站 (500 + 20 + 20)。

这就是导致您的问题的原因。Bootstrap 会像上面的例子一样计算设置的宽度，这些东西没有边框。由于 Bootstrap 像拼图一样组合在一起，在其中一侧添加边框将产生 501px 的总宽度（继续上面的示例）并破坏您的布局。

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

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

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

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

其中新宽度通过以下方式计算：

old width - padding - border

于 2013-03-10T23:10:47.917 回答
9

根据您想要的尺寸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网格项：

自定义网格对象

于 2016-09-13T07:21:58.083 回答
7

其他人提到的边框与边框框绝对是正确的。你仍然可以让它工作，而不必创建任何自定义类：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;  
}

祝你好运！

于 2013-03-11T00:19:24.647 回答
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;
}

小提琴

于 2013-03-10T23:15:28.330 回答
5

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

于 2013-03-10T22:52:52.517 回答
3

如果你需要一个基本的边界，你只需要使用引导井。

例如下面的代码：

<div class="well">Basic Well</div>
于 2019-03-19T05:59:23.690 回答
0

如果您使用的是 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 中边框实用程序的链接： https ://getbootstrap.com/docs/4.2/utilities/borders/

于 2020-09-23T01:03:23.763 回答