Почему столбец md bootstrap не принимает полную ширину страницы? - PullRequest
Новая
       44

Почему столбец md bootstrap не принимает полную ширину страницы?

0 голосов
/ 05 апреля 2020

Я работаю над реактивным js проектом, в котором я использую md bootstrap, я пытаюсь создать компонент, подобный этому enter image description here

enter image description here

первая картинка для рабочего стола, а другая для мобильных пользователей

Итак, я был пытаясь достичь чего-то похожего, я начал играть с bootstrap классами, но не смог добиться этого в своем проекте реакции. Но, к моему удивлению, в моем проекте столбцы не занимают всю ширину. Почему это происходит и что я могу сделать?

Вот это нормально работает в обычном режиме HTML: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Google Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <!-- Bootstrap core CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-8" style="background-color: red;">
        One of two columns
      </div>
      <div class="col-sm-4" style="background-color: yellow;">
        One of two columns
      </div>
    </div>
  </div>
</body>

</html>

Проверьте этот код на JsFiddle .

Вот ссылка на мой проект реагировать js и компонент profile.js Вы можете проверить это через navbar: https://codesandbox.io/s/dawn-flower-iqcuz

Вот что я получаю

enter image description here

Это это то, что я хочу

enter image description here

1 Ответ

1 голос
/ 05 апреля 2020

Ваш пример кода правильный, поэтому он не помогает в решении проблемы.

Я подозреваю, что вы использовали правильный класс container-fluid (max-width: 100% - 100% родительского элемента не 100% окна просмотра), но эта оболочка помещается в другой div с классом container (max-width: 1200px).

Если это так, ваш container-fluid ограничен container и ведет себя так, потому что max-width: 100% равно 1200px.

...