html - Bootstrap 行卡在过去包含 div

Question

我不是前端开发人员，所以我对 html/css 的经验真的很少，但我被要求尝试在门户网站中为某人实现一个新页面，我有点卡住了。

基本的想法是我有这样的东西:

<div class="page">
  <div class="panel">
    <div class="panel-heading">
       <!--stuff-->
    </div>
    <div class="row">
      <div ng-repeat="product in products" class="col-lg-3 col-md-6 col-xs-12">
        <div class="container-fluid block-container">
          <!--Stuff-->
        </div>
      </div>
    </div>
  </div>
</div>

问题来了，因为该行水平悬卡在面板之外，匹配页面宽度而不是面板宽度。

示例图片:http://imgur.com/a/hW1Ln (我在 .block-container 周围添加了边框来演示)

我觉得这应该很容易修复，但我遇到的任何问题都没有奏效。谢谢!

Answer 1

Bootstrap .row 有负边距，所以你应该把行放在 .panel-body...

<div class="panel">
     <div class="panel-heading">
                <!--stuff-->
     </div>
     <div class="panel-body">
           <div class="row">
               <div ng-repeat="product in products" class="col-lg-3 col-md-6 col-xs-12">
                     <div class="block-container">

                     </div>
               </div>
           </div>
     </div>
</div>