引导程序参数不在一行中

Question

我有一个关于col的问题，它不是在一行中。我把它们都放在一个容器中，行和3列col-md-5，col-md-2和col-md-5。所有的填充和页边距都是从CSS bootstrap设置的。

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

感谢您的建议和帮助。

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

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

Answer 2

引导程序列的总和必须为每行12个。如果你想在一行中有多个元素，那么你的“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>

然后你需要添加另一个'row‘元素，并用加起来为12的列填充它。我不确定这是否是你要问的，但我可以从你的问题中看出来。

另外，空的‘div’是多余的，它没有任何意义。你可以删除所有不带class，id等的标签。