Question

我是新手，我试图创建一个看起来像这样的自举手柄：

是否可以将蓝色主框与其余网格放在同一网格中，但只能使用HTML标记？或者我是否必须创建自己的CSS规则才能实现此目标？

我已尝试嵌套行等。但到目前为止，我还没有达到一个好看的结果。

＆＃13;

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

＆＃13;

Answer 1

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

<强> Fiddle

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

有关其他信息，请参阅official doc

Answer 3

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

它是这样的：

＆＃13;

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

＆＃13;

Answer 4

您需要添加两列，然后将面板放在这些列中。第一列＆＃39;尺寸将为9和3。

＆＃34;标准＆＃34;面板将进入第一列和＆＃34;蓝色＆＃34;小组将进入第二个小组。

array

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

Answer 5

使用Bootstrap Grid时应该添加style =＆＃34; float：right;＆＃34;到了

＆＃13;

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

＆＃13;

Twitter Bootstrap网格布局

5 个答案: