Html 不能有3个元素相邻浮动

我遇到了一个小问题，我想将3个部分相邻浮动，但由于某些原因（使用引导类col-md-4），在添加任何边距时，第3个部分会溢出到下一行，对吗，我如何解决这个问题？ `

鸡肉
虚拟文本
牛肉
虚拟文本
寿司
虚拟文本
`

---

最有效的解决方案是为所有截面保留col-md-3，并使用offset-md-1作为间距

最有效的解决方案是为所有截面保留col-md-3，并使用offset-md-1作为间距

我想让3个部分相邻浮动

浮点的更先进、更现代的替代品是flexbox

你可以把flexbox看作是具有超级能力的float

---

历史注释：推特引导框架于2011年推出，比CSS Flexbox定稿早了几年

确实，与2011年可用的方法相比，Bootstrap使CSS中的某些布局更容易实现

但是，正如维基百科所说：

在2010年代，流行JavaScript布局的大量使用 框架，如引导，灵感来自CSSflex box和网格布局规范

来源：

如今，CSS-Flexbox（和CSS-Grid）比Bootstrap更容易实现这些布局

---

在下面的例子中，我有：

• 给定父级（在本例中为

  主体

  ）一个

  显示：flex

• 给孩子们一个

  flex:1 1 33%

第二个属性至关重要

flex

是一个速记属性，表示：

• 元素可能增长的速率（在本例中为

  1

  ）
• 元素可能收缩的速率（在本例中为

  1

  ）
• 初始宽度（在本例中，

  33%

  ）

这意味着，在所有其他条件相同的情况下，元素将占据可用空间的33%（在本例中为

正文的宽度），但如果添加填充、边框、边距等，元素可以缩小，这样元素行就不会占用超过可用空间


工作示例：


正文{
显示器：flex；
}
部分{
弹性：133%；
文本对齐：居中；
}

鸡
虚拟文本


牛肉
虚拟文本


寿司
虚拟文本



我想让3个部分相邻浮动

浮点的更先进、更现代的替代品是flexbox

你可以把flexbox看作是具有超级能力的float


历史注释：推特引导框架于2011年推出，比CSS Flexbox定稿早了几年

确实，与2011年可用的方法相比，Bootstrap使CSS中的某些布局更容易实现

但是，正如维基百科所说：

在2010年代，流行JavaScript布局的大量使用
框架，如引导，灵感来自CSSflex box和网格布局规范

来源：

如今，CSS-Flexbox（和CSS-Grid）比Bootstrap更容易实现这些布局


在下面的例子中，我有：


给定父级（在本例中为
主体
）一个
显示：flex
给孩子们一个
flex:1 1 33%

第二个属性至关重要

flex
是一个速记属性，表示：


元素可能增长的速率（在本例中为
1
）
元素可能收缩的速率（在本例中为
1
）
初始宽度（在本例中，
33%
）

这意味着，在所有其他条件相同的情况下，元素将占据可用空间的33%（在本例中为
正文的宽度），但如果添加填充、边框、边距等，元素可以缩小，这样元素行就不会占用超过可用空间


工作示例：


正文{
显示器：flex；
}
部分{
弹性：133%；
文本对齐：居中；
}

鸡
虚拟文本


牛肉
虚拟文本


寿司
虚拟文本


来自您的评论

@G-Cyrillus这就是重点，我试图在每个部分之间留出一些空间，但这是不允许的，我认为这几乎不适合添加边距。它周围有什么东西吗

如果是ad margin，则应删除调整列大小的col-x类，以获得一个普通col类，该类将在留给它的sroom中增长。您可以将col-md-4类改为col-md-4，用于第二列，它将增长和收缩以适应其他两列，并允许您添加边距：

范例


*{
框大小：边框框；
}
#第一节，
#第二节，
#第三节{
字体大小：120%；
字体大小：粗体；
背景色：#C0；
高度：1700px；
右边距：10px；
溢出：自动；
左边距：自动；
填充：10px；
明确：无；
}
.节头{
字号：1.5em；
字体大小：粗体；
}

鸡
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。多奈克·夸姆·菲利斯，尤里西斯
<section id="FirstSection"  class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Chicken</h3>
dummy text


<a href="#Page-Header">Back To top</a>
</section>
<section id="SecondSection" class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Beef</h3>
    dummy text

<a href="#Page-Header">Back To top</a>
</section>

<section id="ThirdSection"  class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Sushi</h3>
    dummy text

<a href="#Page-Header">Back To top</a>
</section>
</div>`