Question

我连续有3个section标签，但在给出边距时，最后一个标签会滑到下一行，而不是保留在一行中。我尝试使用float:left和display:inline属性，但它无效。

这是我的代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我没有你所有的风格。如果他们没有冲突，请继续工作。

server glx vendor string: SGI
server glx version string: 1.4
client glx vendor string: Mesa Project and SGI
client glx version string: 1.4
GLX version: 1.4
OpenGL vendor string: VMware, Inc.
OpenGL renderer string: Gallium 0.4 on llvmpipe (LLVM 3.6, 128 bits)
OpenGL version string: 2.1 Mesa 10.6.5
OpenGL shading language version string: 1.30
OpenGL ES profile version string: OpenGL ES 2.0 Mesa 10.6.5
OpenGL ES profile shading language version string: OpenGL ES GLSL ES 1.0.16

注意：margin-left：5px与宽度冲突：33％。如果窗口宽度为900px，那么3个部分将占用99％= 891px。 3个边距将总共需要3 x 5px = 15px。总宽度为891 + 15 = 906px> 900px。所以你的最后一节将被移到下一行。为避免这种情况，您可以使用百分比保证金，例如margin-left：0.5％

Answer 2

无法对margin-left内的列使用margin-right和row。
无法使用width作为列，因为col-*已经有宽度。

我明白你为什么这样做。要实现您的目标，请为该部分的内容使用新的container元素，并使用background。

＆＃13;

.bg-gray {
  background-color: #6c757d;
}

.border-1px-dark {
    border: 1px solid;
}

#main-content p {
  font-size: 14px;
}

＆＃13;

<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>

＆＃13;

color:000;等样式无用，因为默认情况下，字体颜色为black。仅在您希望文本的颜色不是black时使用。

如果您希望仅在移动设备的列之间留出一些空间，请使用pb-* pb-sm-0作为部分。

＆＃13;

.bg-gray {
  background-color: #6c757d;
}

.border-1px-dark {
    border: 1px solid;
}

#main-content p {
  font-size: 14px;
}

＆＃13;

<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>

＆＃13;

Answer 3

建议使用div标签进行引导样式。对CSS中的样式进行编码会影响网站的响应能力。您可以将col类放在div外部标记中。

看看这个codepen 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>

将3个部分标记对齐

3 个答案: