Question

我试图让我的div占据整行，但是其他元素仍然停留在同一行

例如，假设我有以下内容：

这需要一行这必须低于第一格

我在布局中使用的是Bootstrap V4，没有包含所有代码。

<div class="container-fluid">
  <div class="row title">
    <h1>Asset Dashboard</h1>
    <asp:Label ID="errorLabel" runat="server"></asp:Label>
  </div>
  <div class="row mainDashboard">
    <div class="col-6 box1">
      <h2>Current Assets</h2>
    </div>
    <div class="col-6 box2">
      <h2>Stock Numbers</h2>
    </div>
    <div class="col-6 box3">
      <h2>Placeholder</h2>
    </div>
    <div class="col-6 box4">
      <h2>Placeholder</h2>
    </div>
  </div>
</div>

我已附上一张当前图片。Current Layout

Answer 1

默认情况下，您可以将行分为12列。
当您说 col-6 时，您使用的是6/12。这样做四次意味着您使用24/12可用的列，因此这些列需要分两行。

我附上了一个片段，其中我将可用空间除以4以适合一行中的所有4列。

Here is a documentation of the grid system

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row title">
      <h1>Asset Dashboard</h1>
      <asp:Label ID="errorLabel" runat="server"></asp:Label>
    </div>
    <div class="row mainDashboard">
      <div class="col-3 box1">
        <h2>Current Assets</h2>
      </div>
      <div class="col-3 box2">
        <h2>Stock Numbers</h2>
      </div>
      <div class="col-3 box3">
        <h2>Placeholder</h2>
      </div>
      <div class="col-3 box4">
        <h2>Placeholder</h2>
      </div>
    </div>
  </div>
</body>

</html>

项目不会使用引导程序出现在新行上

1 个答案: