引导列不在一行

问题描述

我遇到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/

感谢您的建议和帮助。

解决方法

我不知道您的布局应该是什么样子，但这是引导程序列布局应该如何：

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

您的代码中的问题是列不是行等的直接子代。 尝试重构代码，看看您是否了解正在发生的事情...

,

引导程序列必须每行最多加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等的标签。