连续对齐 3 个部分标签
Aligning 3 section tags in a row
我连续有 3 个 section 标签，但在给出边距时，最后一个部分标签会滑到下一行，而不是留在一行中。
我试过使用 float:left 和 display:inline 属性 但它不起作用。
这是我的代码：
#main-content h2 {
color: #000;
margin-top: 10px;
margin-bottom: 30px;
}
#main-content section {
background-color: #6c757d;
color: #000;
border: 1px solid #000;
padding: 0px 0px;
margin-left: 5px;
width: 33%;
}
#main-content h3 {
color: #000;
}
#main-content p {
font-size: 14px;
}
<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div class="row">
<section class="col-md-4 col-sm-6 col-12 ">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
<section class="col-md-4 col-sm-6 col-12">
<h3 class="text-center">Beef</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
<section class="col-md-4 col-sm-12 col-12">
<h3 class="text-center">Sushi</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
</div>
我没有你所有的风格。如果它们不冲突，则执行以下操作。
<html>
<style>
#main-content h2 {
color: #000;
margin-top: 10px;
margin-bottom: 30px;
}
#main-content section {
background-color: #6c757d;
color: #000;
border: 1px solid #000;
padding: 0px 0px;
margin-left: 0.5%;
width: 32%;
display:inline-block;
height: 500px;
float: left;
}
#main-content h3 {
color: #000;
}
#main-content p {
font-size: 14px;
}
.row {
width: 100%;
overflow: hidden;
display:inline;
}
</style>
<body>
<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div class="row">
<section class="col-md-4 col-sm-6 col-12 ">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
<section class="col-md-4 col-sm-6 col-12">
<h3 class="text-center">Beef</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
<section class="col-md-4 col-sm-12 col-12">
<h3 class="text-center">Sushi</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
</div>
</body>
</html>
注意：margin-left: 5px 与 width: 33% 冲突。如果您有 window 宽度 900px，那么 3 个部分将占用 99% = 891px。 3 个边距总共需要 3 x 5px = 15px。总宽度为 891 + 15 = 906px > 900px。因此，您的最后一部分将移至下一行。为避免这种情况，您可以使用百分比形式的边距，例如 margin-left: 0.5%
建议对 bootstrap 使用 div 标签 styling.hardcoding CSS 中的样式会影响 site.You 的响应能力 可以放置 col 类 在 div 外部部分标记中。
看看这个代码笔Align sections using bootstrap
<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div class="row">
<div class="col-md-4 col-sm-6 col-12 ">
<section>
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis
egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem
velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis
tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend
arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed.
Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur
sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum
nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
<div class="col-md-4 col-sm-6 col-12 ">
<section>
<h3 class="text-center">Beef</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis
egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem
velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis
tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend
arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed.
Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur
sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum
nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
<div class="col-md-4 col-sm-6 col-12 ">
<section>
<h3 class="text-center">Sushi</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis
egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem
velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis
tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend
arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed.
Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur
sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum
nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
</div>
- 不能对
row 内的列使用 margin-left 和 margin-right。
不能对列使用 width，因为 col-* 已经有宽度。
我理解你为什么这样做。要实现您想要的效果，请为该部分的内容使用一个新的 container 元素，并为其使用 background。
.bg-gray {
background-color: #6c757d;
}
.border-1px-dark {
border: 1px solid;
}
#main-content p {
font-size: 14px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="main-content" class="container-fluid">
<h2 class="text-center mt-2 mb-5">Our Menu</h2>
<div class="row">
<section class="col-md-4 col-sm-6 col-12 ">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
<section class="col-md-4 col-sm-6 col-12">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
<section class="col-md-4 col-sm-12 col-12">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
</div>
</div>
color:000;这样的样式是没用的，因为默认字体颜色是black。仅当您希望文本的颜色不是 black.
如果您只想在移动设备上的列之间有一些 space，请对部分使用 pb-* pb-sm-0。
.bg-gray {
background-color: #6c757d;
}
.border-1px-dark {
border: 1px solid;
}
#main-content p {
font-size: 14px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="main-content" class="container-fluid">
<h2 class="text-center mt-2 mb-5">Our Menu</h2>
<div class="row">
<section class="col-md-4 col-sm-6 col-12 pb-4 pb-sm-0">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
<section class="col-md-4 col-sm-6 col-12 pb-4 pb-sm-0">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
<section class="col-md-4 col-sm-12 col-12 pb-4 pb-sm-0">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
</div>
</div>
我连续有 3 个 section 标签，但在给出边距时，最后一个部分标签会滑到下一行，而不是留在一行中。
我试过使用 float:left 和 display:inline 属性 但它不起作用。
这是我的代码：
#main-content h2 {
color: #000;
margin-top: 10px;
margin-bottom: 30px;
}
#main-content section {
background-color: #6c757d;
color: #000;
border: 1px solid #000;
padding: 0px 0px;
margin-left: 5px;
width: 33%;
}
#main-content h3 {
color: #000;
}
#main-content p {
font-size: 14px;
}
<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div class="row">
<section class="col-md-4 col-sm-6 col-12 ">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
<section class="col-md-4 col-sm-6 col-12">
<h3 class="text-center">Beef</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
<section class="col-md-4 col-sm-12 col-12">
<h3 class="text-center">Sushi</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
</div>
我没有你所有的风格。如果它们不冲突，则执行以下操作。
<html>
<style>
#main-content h2 {
color: #000;
margin-top: 10px;
margin-bottom: 30px;
}
#main-content section {
background-color: #6c757d;
color: #000;
border: 1px solid #000;
padding: 0px 0px;
margin-left: 0.5%;
width: 32%;
display:inline-block;
height: 500px;
float: left;
}
#main-content h3 {
color: #000;
}
#main-content p {
font-size: 14px;
}
.row {
width: 100%;
overflow: hidden;
display:inline;
}
</style>
<body>
<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div class="row">
<section class="col-md-4 col-sm-6 col-12 ">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
<section class="col-md-4 col-sm-6 col-12">
<h3 class="text-center">Beef</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
<section class="col-md-4 col-sm-12 col-12">
<h3 class="text-center">Sushi</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
</div>
</body>
</html>
注意：margin-left: 5px 与 width: 33% 冲突。如果您有 window 宽度 900px，那么 3 个部分将占用 99% = 891px。 3 个边距总共需要 3 x 5px = 15px。总宽度为 891 + 15 = 906px > 900px。因此，您的最后一部分将移至下一行。为避免这种情况，您可以使用百分比形式的边距，例如 margin-left: 0.5%
建议对 bootstrap 使用 div 标签 styling.hardcoding CSS 中的样式会影响 site.You 的响应能力 可以放置 col 类 在 div 外部部分标记中。
看看这个代码笔Align sections using bootstrap
<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div class="row">
<div class="col-md-4 col-sm-6 col-12 ">
<section>
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis
egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem
velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis
tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend
arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed.
Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur
sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum
nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
<div class="col-md-4 col-sm-6 col-12 ">
<section>
<h3 class="text-center">Beef</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis
egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem
velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis
tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend
arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed.
Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur
sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum
nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
<div class="col-md-4 col-sm-6 col-12 ">
<section>
<h3 class="text-center">Sushi</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis
egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem
velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis
tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend
arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed.
Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur
sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum
nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</section>
</div>
</div>
- 不能对
row内的列使用margin-left和margin-right。 不能对列使用
width，因为col-*已经有宽度。我理解你为什么这样做。要实现您想要的效果，请为该部分的内容使用一个新的
container元素，并为其使用background。
.bg-gray {
background-color: #6c757d;
}
.border-1px-dark {
border: 1px solid;
}
#main-content p {
font-size: 14px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="main-content" class="container-fluid">
<h2 class="text-center mt-2 mb-5">Our Menu</h2>
<div class="row">
<section class="col-md-4 col-sm-6 col-12 ">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
<section class="col-md-4 col-sm-6 col-12">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
<section class="col-md-4 col-sm-12 col-12">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
</div>
</div>
color:000;这样的样式是没用的，因为默认字体颜色是black。仅当您希望文本的颜色不是black. 时才使用
如果您只想在移动设备上的列之间有一些 space，请对部分使用 pb-* pb-sm-0。
.bg-gray {
background-color: #6c757d;
}
.border-1px-dark {
border: 1px solid;
}
#main-content p {
font-size: 14px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="main-content" class="container-fluid">
<h2 class="text-center mt-2 mb-5">Our Menu</h2>
<div class="row">
<section class="col-md-4 col-sm-6 col-12 pb-4 pb-sm-0">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
<section class="col-md-4 col-sm-6 col-12 pb-4 pb-sm-0">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
<section class="col-md-4 col-sm-12 col-12 pb-4 pb-sm-0">
<div class="bg-gray border-1px-dark p-3">
<h3 class="text-center">Chicken</h3>
<p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis
magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
</div>
</section>
</div>
</div>