Bootstrap - 带装订线的列边框答案

【问题标题】：Bootstrap - Border On Columns With GutterBootstrap - 带装订线的列边框
【发布时间】：2015-07-06 22:12:35
【问题描述】：

我试图有 4 个 div，每个 3 列宽度，边框为 3px。我的列与边框很好，但我无法让边框框工作。我假设我需要将边框作为内部边框以允许每个 div 之间的排水沟。

我正在尝试对 2、6 列 div 做同样的事情并遇到同样的问题。

<div class="container products">
    <div class="row">
        <!-- First featured product -->
        <div class="col-lg-6 featured_product">
            <div class="row">
                <div class="col-lg-6"><img src="img/products/xbo_hs.png" alt=""></div>
                <div class="col-lg-4 col-lg-push-1">
                    <ul>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                    </ul>
                    <button class="btn btn-primary">More Info</button>
                </div>
            </div>
        </div><!-- End first featured product -->

        <!-- Second featured product -->
        <div class="col-lg-6 featured_product">
            <div class="row">
                <div class="col-lg-6"><img src="img/products/xbo_hs.png" alt=""></div>
                <div class="col-lg-4 col-lg-push-1">
                    <ul>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                    </ul>
                    <button class="btn btn-primary">More Info</button>
                </div>
            </div>
        </div><!-- End second featured product -->
    </div>

.products {
   padding-top: 30px;

  .featured_product {
      border: 5px solid #1488c8;
      box-sizing: border-box;
      -moz-box-sizing: border-box;

      ul {
         list-style-type: disc;
         padding-top: 5%;
         padding-bottom: 5%;
      }

      button {
        width: 100%;
      }
}

【问题讨论】：

你的代码在哪里？

标签： css twitter-bootstrap grid border

【解决方案1】：

默认情况下，Bootstrap 的 box-sizing 属性设置为边框框，因此无需将其应用于任何内容。

来自 BS：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Box-sizing 将填充和边框作为元素高度和宽度的一部分。 bootstrap 中的排水沟是使用填充创建的，因此对列应用边框不会达到您想要的效果。

你为什么不创建一个.inner 并将边框应用到那个...

.inner{
  background: aliceblue;
  border: 1px solid blue;
  margin: 10px 0;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="inner">col-6</div>
    </div>
    <div class="col-lg-6">
      <div class="inner">col-6</div>
    </div>
  </div>

【讨论】：

我试过这个，但内盒由于某种原因没有包裹起来。好像没有高度
我不明白，这是一支带有您的代码和应用了内部概念的笔……高度对我来说似乎很好。这不对吗……？ codepen.io/anon/pen/xGWqqK
效果很好，我的 css 中一定有某种错误。非常感谢。
我确实注意到您的 .products scss/sass 标记未正确关闭，也许这就是问题所在。

【解决方案2】：

在您的css 中，您正在嵌套tags。我不知道你想要达到什么目的，但我相信这就是你想要做的：

.products{
   padding-top: 30px;
}
.featured_product{
    border: 5px solid #1488c8;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.featured_product ul{
    list-style-type: disc;
    padding-top: 5%;
    padding-bottom: 5%;
}

.featured_product button{
    width: 100%;
}

jsfiddle link

【讨论】：

对不起，我应该说。我正在使用 sass。