引导-在带有Gutter的列上边框

Question

我正在尝试有4个div，每个列的宽度为3列，边框为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

在默认情况下，引导程序将框大小属性设置为边框框，因此不需要将其应用于任何内容。

BS：：

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

盒形尺寸采用填充和边框作为元素高度和宽度的一部分。引导程序中的排水沟是使用填充创建的，因此将边框应用到列中并不能实现您想要的结果。

你为什么不创建一个.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>

​

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

琴键