Question

我不是前端开发人员所以我对html / css的经验非常少，但我被要求尝试在某个门户网站上为某人实现一个新页面而且我有点陷入困境。 / p>

基本思想是我有类似的东西：

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

Answer 2

添加包含类.container的所有内容的div实际上在此添加该类：

<div class="page container">

Bootstrap行挂出过去包含div

2 个答案: