html - Bootstrap 的网格布局

Question

我很难以某种方式设计我的专栏样式。我有 2 行包含 2 列，每列大小相同。

A B CD

我应该添加一个更长的列，包含旁边的两行。

A B E C D E

E 两行的长度相等。我尝试将两个 div 分开并将每个 div float 到其相应的边，但无济于事。 我的代码:

.announcements{
	width: 300px;
	height: 500px;
	background: #FFFFFF;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08);
	float: right;
}

.btn-links{
	width: 300px;
	height: 160px;
	background: #FFFFFF;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08);
	border-radius: 5px;
}

<div class="container-fluid bg-content">
      <div class="content">
        <div class="content-heading">
          <h1> Welcome, </h1> <!--Name of user-->
          <h4> What do you want to do today? </h4>
        </div>
        <div class="quick-links">
          <div class="row">
            <div class="col-md-4">
              <button class="btn-links"></button>
            </div>
            <div class="col-md-4">
              <button class="btn-links"></button>
            </div>
            <div class="panel announcements">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <button class="btn-links"></button>
            </div>
            <div class="col-md-4">
              <button class="btn-links"></button>
            </div>
          </div>
        </div>
      </div>
    </div>

然而，这段代码产生:

ABCD 是矩形框，E 是右边的长列。我该如何解决这个问题，我们可以在左侧放置更多矩形框，而右侧面板保持 float 在一侧？提前致谢。

Answer 1

你要的是下面的，可以去this fiddle查看，但要确保窗口足够大，使 md 大小的 4/12 适合右侧，否则响应会导致它下降到下面。 如果你想让它在较小的尺寸下保持在右边，你会想要用 col-sm... 替换 col-md... 或添加 col-sm...

<div class="container-fluid bg-content">
  <div class="content">
    <div class="content-heading">
      <h1> Welcome, </h1> <!--Name of user-->
      <h4> What do you want to do today? </h4>
    </div>
    <div class="quick-links">
      <div class="row">
        <div class="col-md-8">
          <div class="col-md-6">
            <button class="btn-links"></button>
          </div>
          <div class="col-md-6">
            <button class="btn-links"></button>
          </div>
          <div class="col-md-6">
            <button class="btn-links"></button>
          </div>
          <div class="col-md-6">
            <button class="btn-links"></button>
          </div>
        </div>
        <div class="col-md-4 panel announcements">
        hello there
        </div>
      </div>
    </div>
  </div>
</div>

您从外到内。首先，您有一行包含整个内容，其中一个 div 占该行的 8/12，另一个 div 占面板公告的 4/12。然后，在第一个 8/12 div 中你有两行，每行有两个 div，每个有 6/12 的空间。