Я пытаюсь расположить 3 столбца разделов одинаково, назначая col-lg-4 или col-lg-3 для каждого из них с помощью Bootsstrap 4.
С col-lg-4 или любой адаптивной комбинацией, котораязанимает всего 12 столбцов, я не получаю поля между столбцами.
При использовании col-lg-3 поля становятся слишком широкими.
Та же проблема возникает и с классом «container», и с контейнером-флюидом.
Я также попытался настроить поля вручную, заменив mx-auto на поле Bootstrap4, установленное в m-3., но это не решает проблему, потому что в этом случае все столбцы перемещаются влево, оставляя пустое пространство с правой стороны экрана.
Проблема возникает в тот момент, когда я пытаюсь поставить поля.В противном случае, если нет полей, я могу установить col-lg-4 без проблем.Я получу, например, 3 хороших столбца.Но как только я ставлю поля, это становится неправильно.Я следовал рекомендации по https://getbootstrap.com/docs/4.0/utilities/spacing/, но все равно это не помогло.
* {
box-sizing: border-box;
}
body {
font-size: 16px;
color: black;
background-color: #eeeeee;
font-family: 'Oxygen', sans-serif;
}
.navbar {
background-color: rgb(178, 238, 13);
border-radius: 0;
border: 0;
margin: 0;
padding: 0;
}
#collapsibleNavbar {
background-color: rgb(229, 243, 192);
text-align: center;
}
.navbar-nav li a {
color: black;
border-style: solid;
border-width: 1px;
}
.navbar-brand {
color: black;
padding: 15px;
}
h5{
margin-bottom: 15px;
padding-top: 7px;
}
h2{
font-size: 175%;
margin-bottom: 30px;
margin-top: 20px;
}
.paraf{
background-color: #e6ee9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 3</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light">
<a id="get-back" class="navbar-brand" href="#">Food, LLC</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="d-lg-none d-md-none navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#chicken">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#beef">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sushi">Sushi</a>
</li>
</ul>
</div>
</nav>
</header>
<h2 class="text-center"> Our Menu </h2>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-12 paraf mx-auto">
<h5 class="text-center" id="chicken">Chicken</h5>
<p>Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.
Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros. <br> (End of Chicken section) <a href="#get-back">Back to Top</a></p></div>
<div class="col-lg-4 col-md-6 col-sm-12 col-12 paraf mx-auto">
<h5 class="text-center" id="beef">Beef</h5>
<p>Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.
Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.<br>(End of Beef section) <a href="#get-back">Back to Top</a></p></div>
<div class="col-lg-4 col-md-12 col-sm-12 col-12 paraf mx-auto">
<h5 class="text-center" id="sushi">Sushi</h5>
<p>Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.
Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.<br>(End of Sushi section) <a href="#get-back">Back to Top</a></p></div>
</div>
</div>
</body>
</html>
Можете ли вы подсказать, как это исправить и получить поля между столбцами.