如何在Bootstrap 4 col上对齐内容

Question

我有一个页脚的代码：

  <div class="container"> <hr>
    <div class="row">
      <div class="col-md-6"> 
         © BusinessName 2017.
      </div>
      <div class="col-md-3"> <br>
        <a href="/blog"> Blog </a> <br>
        <a href="/blog"> FAQ </a> <br>
        <a href="/blog"> About </a> 
      </div>
      <div class="col-md-3"> 
        <p><strong>Contact</strong> <br> contact@businessname.com <br> more info bla bla <br> more more more info</p>
      </div>
    </div>   </div>

我正在努力使所有内容与底线保持一致，我尝试过一些事情，但没有任何作用......任何好主意？

Answer 1

您可以使用mean ...

中的<div class="container"> <hr> <div class="row align-items-end"> <div class="col-md-6"> © BusinessName 2017. </div> <div class="col-md-3"> <a href="/blog"> Blog </a> <br> <a href="/blog"> FAQ </a> <br> <a href="/blog"> About </a> </div> <div class="col-md-3"> <strong>Contact</strong> <br> contact@businessname.com <br> more info bla bla <br> more more more info </div> </div> </div>

mt-auto

new Bootstrap 4 flexbox utilities

此外，自动边距在flexbox内部有效。在那里你可以使用pd.concat([df1['2014-06-10'] , df1['2014-06-15'], df1['2014-06-20']]) （margin-top：auto）来推动＆＃34;推送＆＃34; col- *到底部。

Answer 2

Row vs Col，请检查https://jsfiddle.net/Julesezaar/zyh5a4rb/

对于整行中的所有列，在行上使用align-items-end

<div class="row border align-items-end">
    <div class="col"> 
        A (row align-items-end)
        <br/>
        A<br/>
        A<br/>
    </div>
    <div class="col">
        B
    </div>
    <div class="col">
        C
    </div>
    <div class="col">
        D
    </div>
</div>

对于单列，我们align-self-end

<div class="row border">
    <div class="col"> 
        A
    </div>
    <div class="col">
        B<br/>
        B<br/>
        B<br/>
    </div>
    <div class="col align-self-end">
        C (col align-self-end)
    </div>
    <div class="col">
        D
    </div>
</div>