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

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

来自BS：

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

Box-sizing将填充和边框作为元素高度和宽度的一部分。引导程序中的装订线是使用填充创建的，因此对列应用边框不会达到您想要的效果。

为什么不创建.inner并将边框应用于...

＆＃13;

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

＆＃13;

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

＆＃13;

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

Bootstrap - 与天沟的专栏的边界

2 个答案:

jsfiddle link