Question

我在col-md-2 div中插入了一行（col-md-12）div。我希望行div占据页面的整个宽度。但它只需要父col-md-2的宽度。我如何以引导方式克服这个问题？

  <div class="options-main row">
    <div class="col-md-2 col-sm-3 border-box">       
           <img src="#" class="img-responsive">        
        <div class="options-main-sub row">
            <div class="col-md-2 col-sm-3 border-box">

            </div>
            <div class="col-md-2 col-sm-3 border-box">

            </div>
            <div class="col-md-2 col-sm-3 border-box">

            </div>
            <div class="col-md-2 col-sm-3 border-box">

            </div>
            <div class="col-md-2 col-sm-3 border-box">

            </div>
            <div class="col-md-2 col-sm-3 border-box">

            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 border-box">

    </div>
    <div class="col-md-2 col-sm-3 border-box">

    </div>
    <div class="col-md-2 col-sm-3 border-box">

    </div>
    <div class="col-md-2 col-sm-3 border-box">

    </div>
    <div class="col-md-2 col-sm-3 border-box">

    </div>
</div>

这就是它的实际外观。第一行中的每列将在第二行中具有6个对应列

Answer 1

为要在页面中创建的每一行使用单独的row元素。这是bootstrap中的一个基本概念，如果不理解这个概念，就不应该继续前进。

您的问题可以解决如下：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-xs-push-2">
      Content
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      Content
    </div>
    <div class="col-xs-2">
      Content
    </div>
    <div class="col-xs-2">
      Content
    </div>
    <div class="col-xs-2">
      Content
    </div>
    <div class="col-xs-2">
      Content
    </div>
    <div class="col-xs-2">
      Content
    </div>
  </div>
</div>

＆＃13;

请注意，在上面的代码段中，我已将col-md-x替换为col-xs-x，以便在小屏幕上看到相同的预览。

另请注意col-xs-push-x课程。它用于设置偏移量。因此，在本演示中，我假设对应于第一行第二列中的条目，第二行中有6列。

您需要使用一些class或id关系来表明，特定的第二行属于第一行中的条目。

<小时/> 或者，您可以将第二行括在fixed块

中

＆＃13;

.hover {
  position: fixed;
  width: 100%;
  left: 0
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-xs-push-2">
      Content
      <div class="hover">
        <div class="row">
          <div class="col-xs-2">
            Content
          </div>
          <div class="col-xs-2">
            Content
          </div>
          <div class="col-xs-2">
            Content
          </div>
          <div class="col-xs-2">
            Content
          </div>
          <div class="col-xs-2">
            Content
          </div>
          <div class="col-xs-2">
            Content
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

＆＃13;

＆＃13; 但请注意，不是一种引导方式。

如何在col-md-2中插入col-md-12并取全宽

1 个答案: