如何在bootstrap 4中创建stretch-auto-auto列布局

Question

基本上我想要这样的东西：

是否可以使用列而不是浮点数实现此目的？

<div class="clearfix">
   <div class="float-left"><button class="rounded btn btn-outline-dark btn-sm">Expand All</button></div>
   <div class="float-right">
      <nav aria-label="...">
         <ul class="pagination">
            <li class="page-item disabled"><a class="page-link" href="#">&lt;</a></li>
            <li class="page-item active bg-dark"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">&gt;</a></li>
         </ul>
      </nav>
   </div>
   <div class="float-right"><span>2 Results</span></div>
</div>

Answer 1

您可以使用Bootstrap 4中包含的 flexbox 。唯一的＆＃34;技巧＆＃34;这里使用的是中间DIV上的ml-auto（margin-left：auto），以便它被推到右边。使用order-更改DIV的顺序。

https://www.codeply.com/go/ayBOamHipS

    <div class="d-flex">
        <div>
            <button class="rounded btn btn-outline-dark btn-sm">Expand All</button>
        </div>
        <div class="order-last"> 
            <nav aria-label="...">
                <ul class="pagination">
                    <li class="page-item disabled"><a class="page-link" href="#">&lt;</a></li>
                    <li class="page-item active bg-dark"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">&gt;</a></li>
                </ul>
            </nav>
        </div>
        <div class="ml-auto py-2"> <span>2 Results </span> </div>
    </div>