时间戳

首页 > 解决方案 > 使用引导程序的项目不会出现在新行上

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

问题描述

我试图让我的 div 占据整条线，但是其他元素仍然保持在同一条线上

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

这需要在一行这需要在第一个 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>

我附上了一张它目前的样子。当前布局

标签： htmlcsstwitter-bootstrap

解决方案

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

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

这是网格系统的文档

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

推荐阅读