引导列不在一行中答案

【问题标题】：Bootstrap cols not in one row引导列不在一行中
【发布时间】：2020-09-01 01:53:20
【问题描述】：

我对不在一行中的col 有疑问。我将它们全部放在一个容器中，行和 3 列 col-md-5、col-md-2 和 col-md-5。所有的内边距和边距都是从 CSS 引导程序设置的。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div>
        <div class="col-md-5 col-xs-12">
          <div>
            <div class="row-7 clearfix">
              <p class="text">Výtečně<br>chutnám</p>
              <img class="text-2" src="../images/unk.png" alt="!" title="!">
            </div>
            <div class="button-holder">Koupit</div>
          </div>
        </div>
        <div class="col-md-2 col-xs-12 mobile-hide">
          <div class="line"></div>
        </div>
        <div class="col-md-5 col-xs-12">
          <p class="text-3">TEXT</p>
        </div>
      </div>
    </div>
  </div>
</div>

这里的开发页面：http://dev.ekolok.cz/

感谢您的建议和帮助。

【问题讨论】：

想要的输出是什么？
在.row 的正下方只允许使用.col[XY]。另外不应该有像.row-7 这样的东西。那应该是.col-7 > .row。
plus: col-xs-12 如果您使用任何其他 col 定义，则完全是可选的。这意味着：如果视口低于md，col-md-2 将始终跨越 12

标签： css twitter-bootstrap-3

【解决方案1】：

我不知道你的布局应该是什么样子，但这是引导列布局应该是什么样子：

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

您的代码中的问题是列不是行等的直接子级。尝试重构代码，看看你是否理解发生了什么......

【讨论】：

【解决方案2】：

引导列每行最多必须加 12 个。如果您想连续使用多个元素，您的“col-whatevers”必须加起来为 12。

例如，如果您希望标题和按钮位于同一行，您的代码需要如下所示：

 <div class="container">
        <div class="row">
            <div class="col-6">
                <p class="text">Výtečně<br>chutnám</p>
            </div>
            <div class="col-6">
                <img class="text-2" src="../images/unk.png" alt="!" title="!">
            </div>
        </div>
</div>

然后您需要添加另一个“行”元素并用加起来为 12 的列填充它。不确定这是否是您要问的，但这是我可以从您的问题中得出的结论。

另外，空的“div”是多余的，它没有任何意义。您可以删除所有不带类、ID 等的标签。

【讨论】：