Я пытаюсь заставить свой 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>

Я прикрепил изображение того, как он выглядит в настоящее время. Текущий макет

0
dbjoe 5 Окт 2018 в 23:29

1 ответ

Лучший ответ

По умолчанию вы можете разбить строку на 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>
3
TimSch 5 Окт 2018 в 20:46