Question

如何使用Bootstrap网格系统实现this image中显示的设置？绿色矩形表示Bootstrap面板，橙色矩形表示Bootstrap Jumbotron。

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

这是我目前的代码（%%% CONTENT %%%正在被PHP取代，所以不要打扰它们）：

    <div class="jumbotron" style="background-color:rgba(231,231,231,0.5);">
        <div class="container">
            <h1>%%%JUMBOTRON%%%</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">%%%TITEL%%%</div>
                <div class="panel-body">
                    %%%CONTENT%%%
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-8">
                    <div class="panel panel-primary">
                        <div class="panel-heading">%%%TITEL%%%</div>
                        <div class="panel-body">
                            %%%CONTENT%%%
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-primary">
                        <div class="panel-heading">%%%TITEL%%%</div>
                        <div class="panel-body">
                            %%%CONTENT%%%
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-primary">
                        <div class="panel-heading">%%%TITEL%%%</div>
                        <div class="panel-body">
                            %%%CONTENT%%%
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-primary">
                        <div class="panel-heading">%%%TITEL%%%</div>
                        <div class="panel-body">
                            %%%CONTENT%%%
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

你的结构应该是： -Nav -Jumbotron - 分成两半 - 后半部分包含2行全宽

与此类似的事情：

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

Answer 2

以下是使用原始问题中描述的Panel的示例：

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

Bootstrap网格系统col两高

2 个答案: