Bootstrap 网格 sm 或 xs 不工作

Question

<div class="row" style="border: solid green 1px;"> <div align="left" style="margin-bottom: 10px;" class="col-sm-4 ">Center Spread  </div> <div class="col-sm-2"> &#8358;75,000 <a href="#"> <button class="btn btn-outline-success btn-sm"> Pay </button></a></div> </div>
                <div class="row" style="border: solid green 1px;"> <div align="left" style="margin-bottom: 10px;" class="col-sm-4 ">Full Page  </div> <div class="col-sm-2">&#8358;50,000 <a href="#"> <button class="btn btn-outline-success btn-sm"> Pay </button></a></div> </div>
                <div class="row" style="border: solid green 1px;"> <div align="left" style="margin-bottom: 10px;" class="col-sm-4 ">Half Page </div> <div class="col-sm-2">&#8358;30,000 <a href="#"> <button class="btn btn-outline-success btn-sm"> Pay </button></a></div> </div>
                <div class="row" style="border: solid green 1px;"> <div align="left" style="margin-bottom: 10px;" class="col-sm-4 ">Quarter Page  </div> <div class="col-sm-2">&#8358;20,000 <a href="#"> <button class="btn btn-outline-success btn-sm"> Pay </button></a></div> </div>

上面的代码呈现如下：

我希望行中的项目水平排列，即居中点差、金额和支付按钮都在一行任何帮助将不胜感激。

Answer 1

请再阅读以下文档 1 次，以确保您了解这些概念以及如何正确使用它们：

Bootstrap 网格：https://getbootstrap.com/docs/4.1/layout/grid/
弹性框：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Bootstrap 实用程序类 for flex, esp align-items: https://getbootstrap.com/docs/4.1/utilities/flex/#align-items

您的问题可以通过清理 HTML:

来解决

<div class="container">
    <div class="row align-items-center border border-success">
        <div class="col-5">Center Spread</div>
        <div class="col-4">&#8358;75,000</div>
        <div class="col-3">
            <a href="#" class="btn btn-outline-success btn-sm">Pay</a>
        </div>
    </div>
    <div class="row align-items-center border border-success">
        <div class="col-5 ">Full Page</div>
        <div class="col-4">&#8358;50,000</div>
        <div class="col-3">
            <a href="#" class="btn btn-outline-success btn-sm">Pay</a>
        </div>
    </div>
    <div class="row align-items-center border border-success">
        <div class="col-5">Half Page</div>
        <div class="col-4">&#8358;30,000</div>
        <div class="col-3">
            <a href="#" class="btn btn-outline-success btn-sm">Pay</a>
        </div>
    </div>
    <div class="row align-items-center border border-success">
        <div class="col-5">Quarter Page</div>
        <div class="col-4">&#8358;20,000</div>
        <div class="col-3">
            <a href="#" class="btn btn-outline-success btn-sm">Pay</a>
        </div>
    </div>
</div>

fiddle: http://jsfiddle.net/aq9Laaew/158451/

Bootstrap 网格 sm 或 xs 不工作

Bootstrap grid sm or xs not working

grid-layout

bootstrap-4