Bootstrap - 带装订线的列边框

Question

我正在尝试设置 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%;
      }
}

Answer 1

在您的 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

Answer 2

Bootstrap 默认将框大小属性设置为边框框，因此无需将其应用于任何内容。

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

Bootstrap - 带装订线的列边框

Bootstrap - Border On Columns With Gutter

css

grid

border

twitter-bootstrap

jsfiddle link