Html 自举网格系统

如何使用引导网格系统实现中所示的设置？绿色矩形代表引导面板，橙色矩形代表引导巨型机器人

（不要打扰图像中的文字）

这是我目前拥有的代码（%%%内容%%%正在被PHP取代，所以不要打扰他们）：

%%%巨无霸%%
%%%滴度%%
%%%含量%%
%%%滴度%%
%%%含量%%
%%%滴度%%
%%%含量%%
%%%滴度%%
%%%含量%%
%%%滴度%%
%%%含量%%

您的结构应该是： -导航 -巨无霸 -两半分开的一行 -第二部分包含两行全宽

类似于此：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <!-- ... rest of your nav configuration -->
</nav>

<div class="jumbotron">
  <div class="container">
    <h1>Jumbo!</h1>
  </div>
</div>

<div class="container">
   <div class="row">
       <div class="col-md-6">
           left side
       </div>
       <div class="col-md-6">
           <div class="row">
               <div class="col-md-12">
                   right side 1
               </div>
           </div>
           <div class="row">
               <div class="col-md-12">
                   right side 2
               </div>
           </div>
        </div>
    </div>
</div>

巨无霸
左侧
右侧1
右侧2

以下是使用原始问题中所述面板的示例：

<div class="row">
  <div class="jumbotron" style="background-color:rgba(231,231,231,0.5);">
    <div class="container">
      <h1>%%%JUMBOTRON%%%</h1>
    </div>
  </div>
</div>

<div class="row">
  <div class="container">
    <div class="col-md-6"><!--Column Left-->
      <div class="panel-group">
        <div class="panel panel-primary">
          <div class="panel-heading">%%%TITLE%%%</div>
          <div class="panel-body">%%%CONTENT%%%<br/>Note: The height of this panel is independent of the others<br/>You could set the height using CSS if needed.</div>
        </div> 
      </div>
    </div><!--End Column Left-->

    <div class="col-md-6"><!--Column Right-->
      <div class="panel-group">
        <div class="panel panel-success">
          <div class="panel-heading">%%%TITLE%%%</div>
          <div class="panel-body">%%%CONTENT%%%</div>
        </div>
        <div class="panel panel-success">
          <div class="panel-heading">%%%TITLE%%%</div>
          <div class="panel-body">%%%CONTENT%%%</div>
        </div>
      </div>
    </div><!--End Column Right-->  
  </div><!--End Container-->
</div><!--End Row-->

%%%巨无霸%%
%%%标题%%
%%%CONTENT%%
注意：此面板的高度独立于其他面板
如果需要，可以使用CSS设置高度。
%%%标题%%
%%%含量%%
%%%标题%%
%%%含量%%

我试着搜索它，但我真的不知道如何正确地拼写它。我试过这个问题的代码：好的，我用我现在的代码更新了这个问题。

<div class="row">
  <div class="jumbotron" style="background-color:rgba(231,231,231,0.5);">
    <div class="container">
      <h1>%%%JUMBOTRON%%%</h1>
    </div>
  </div>
</div>

<div class="row">
  <div class="container">
    <div class="col-md-6"><!--Column Left-->
      <div class="panel-group">
        <div class="panel panel-primary">
          <div class="panel-heading">%%%TITLE%%%</div>
          <div class="panel-body">%%%CONTENT%%%<br/>Note: The height of this panel is independent of the others<br/>You could set the height using CSS if needed.</div>
        </div> 
      </div>
    </div><!--End Column Left-->

    <div class="col-md-6"><!--Column Right-->
      <div class="panel-group">
        <div class="panel panel-success">
          <div class="panel-heading">%%%TITLE%%%</div>
          <div class="panel-body">%%%CONTENT%%%</div>
        </div>
        <div class="panel panel-success">
          <div class="panel-heading">%%%TITLE%%%</div>
          <div class="panel-body">%%%CONTENT%%%</div>
        </div>
      </div>
    </div><!--End Column Right-->  
  </div><!--End Container-->
</div><!--End Row-->