Bootstrap 4 не может добавить желоб между двумя столбцами - PullRequest
Новая
       0

Bootstrap 4 не может добавить желоб между двумя столбцами

0 голосов
/ 23 сентября 2019

Я не могу добавить желоб между 2 столбцами.У меня есть строка шириной 1280px (в качестве эталонного разрешения используется 1366x768, поэтому я даю отступы в 43 пикселя с обеих сторон на всей странице), с двумя разделами шириной 620px каждый с промежутком между ними 40px.Но столбцы всегда составляют половину вида (640 пикселей), поэтому нет места для добавления промежутка между ними (даже я думал, что это автоматически).Желоб по умолчанию уже установлен по 20 пикселей с каждой стороны. 

<div class="wrapper">
  <div class="row">
    <div class="col-lg-6 row a">
      aaa
    </div>
    <div class="col-lg-6 row b">
      aaa
    </div>
  </div>
</div>

.wrapper {
  padding: 0 43px;
  background: red;
  height: 100vh;
}

.a {
  background: blue;
  margin: 0;
}

.b {
  margin: 0;
  background: green;
}

Ответы [ 3 ]

1 голос
/ 23 сентября 2019

Прежде всего, это плохая практика - использовать класс row с классом col-**-*.

Во-вторых, если вы используете свой пользовательский класс с классом col-**-* и применяете background-color, тогда он охватывает всю область вашего столбца, поэтому, пожалуйста, поместите свой пользовательский класс в качестве дочернего элемента вашего col-**-* класса, а затем примените background-color к своему пользовательскому классу.

покажите фрагмент во всю ширину: 

.wrapper {
  padding: 0 43px;
  background: red;
  height: 100vh;
}

.a {
  background: blue;
  margin: 0;
}

.b {
  margin: 0;
  background: green;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
  <div class="wrapper">
    <div class="row">
      <div class="col-lg-6">
        <div class="a">aaa</div>
      </div>
      <div class="col-lg-6">
        <div class="b">bbb</div>
      </div>
    </div>
  </div>
</body>
</html>
0 голосов
/ 23 сентября 2019

Как я знаю, чтобы добавить желоба, которые вам не нужны для написания CSS, это дает самозагрузка.просто не добавляйте желоба в класс div, как <div class="row no-gutters">

0 голосов
/ 23 сентября 2019

добавьте контейнер в вашу оболочку 

<div class="wrapper">
 <div class="container"> <!-- or container-fluid -->
  <div class="row">
    <div class="col-lg-6 row a">
      aaa
    </div>
    <div class="col-lg-6 row b">
      aaa
    </div>
  </div>
 </div>
</div>

проверьте также, как работает класс .container и .container-liquid https://getbootstrap.com/docs/4.3/layout/overview/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...