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>