谁能告诉我在bootstrap 3中'border-box‘属性是如何工作的？如何管理容器宽度？

Question

<div class="container">
     <ul class="list-group">
           <li class="list-group-item">
                 <a href="#">TOUCH ME</a>
                 <div class="list-group-content">
                       <h4 class="list-group-item-heading">STYLISH</h4>
                       <p class="list-group-item-text">
                             <span>ITEM</span>
                             <a href="#">read more</a>
                       </p>
                 </div>
            </li>
      </ul>
</div>

我没有得到我应该在这里使用的容器宽度。我最初认为它是960px。但是padding-left:15px padding-right:15px增加了混淆。我想知道它应该是960还是990(两边都有15px的填充)。我读到边框属性在这里扮演了一个角色。任何人请帮帮忙。

Answer 1

使用bootstrap时，我总是这样编写代码。

<section class="yourclasshere">
    <div class="container">
         <div class="row">
               <div class="col-md-3">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet quaerat atque nihil nobis similique odio explicabo asperiores ex minus facere laboriosam blanditiis vel sed non officiis nemo ducimus voluptatem.</p>
               </div><!-- .Col-md-3 ends here -->
         </div>
    </div>
</section>

Answer 2

注意:将此代码添加到中以删除元素中的填充。

-moz-box-sizing:content-box;
-o-box-sizing:content-box;
-webkit-box-sizing:content-box;
-ms-box-sizing:content-box;