css - Bootstrap - 带装订线的列边框

Question

我正在尝试使用 4 个 div，每个 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%;
      }
}

Answer 1

Bootstrap 默认将 box-sizing 属性设置为 border-box，因此无需将其应用于任何内容。

来自 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>