Twitter Bootstrap网格布局

Question

我对Bootstrap感到陌生，并且我试图创建一个Bootstrap握柄，其外观应如下所示：

是否可以将蓝色的主框与其他框放在同一网格中，但仅使用HTML标签？ 还是我必须创建自己的CSS规则才能实现这一目标？

我已经尝试嵌套行等。但是到目前为止，我还无法获得漂亮的结果。

 <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> 

Answer 1

您可以执行此操作，但必须使用Flexbox才能使右侧面板的高度与左侧面板的高度相同

小提琴

@media(min-width: 992px) {
  .content {
    display: flex;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .right .panel {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .right .panel .panel-body {
    flex: 1;
  }
}

<div class="content">
  <div class="col-md-9 left">

    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-3 right">
    <div class="panel panel-info">
      <div class="panel-heading">
        Panel 1
      </div>
      <div class="panel-body">
        content body
      </div>
    </div>
  </div>
</div>

Answer 2

使用引导程序的panel-default panel-primary类而不是panel-default

另外，您应该使用col-md-3将面板固定在右侧

例如

<div class="row">
    <div class="col-md-9">
        <!--something here-->
    </div>
    <div class="col-md-3">
       <div class="panel panel-primary">
           <div class="panel-heading">Panel 1</div>
           <div class="panel-body">Content Body</div>
       </div>
    </div>
</div>

有关其他信息，请参见官方文档

Answer 3

是的，有可能。 您应该首先创建包含两列的一行。 第一列内部将包含3行，然后内部将包含更多列。 请记住，网格布局的工作范围是1至12，因此，如果您的左侧部分的大小为9，则右侧面板的其余部分应采用其余3作为其列大小。

它是这样的：

 <div class="row"> <div class "col-md-9"> <div class="row"> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> </div> <div class="row"> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> </div> <div class="row"> <div class "col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> </div> </div> <div class="col-md-3"> *insert panel here* </div> </div> 

Answer 4

您将需要添加两列，然后将面板放在这些列中。 第一列的大小将为9和3。

“标准”面板将进入第一列，“蓝色”面板将进入第二列。

<div class="col-md-3">

  // Standard panels.
  <div class="col-md-9">

    // First row.
    <div class="col-md-12">
      // Wide panel
    </div>

    // Second row.
    <div class="col-md-4">
      // smaller panel
    </div>
    <div class="col-md-4">
      // smaller panel
    </div>
    <div class="col-md-4">
      // smaller panel
    </div>

  </div>

  // Blue panel
  <div class="col-md-3">
    <div class="panel panel-primary">
      <div class="panel-heading">Panel with panel-primary class</div>
      <div class="panel-body">Panel Content</div>
    </div>

  </div>

在第一列内部，标准面板的大小为全宽面板为12，每个较小的面板为4。 这是因为尺寸是相对于父级的。 父列的宽度为9，因此子列的大小将为该9的12的大小。希望这有意义。

Answer 5

当使用Bootstrap Grid时 ，应该像添加style =“ float：right;”一样简单。 到

  <div class="container"> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> <div class="col-md-3" style="float:right;"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body" style="height: 300px;"> content body </div> </div> </div> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> </div>