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

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

引导网格：https://getbootstrap.com/docs/4.1/layout/grid/
Flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
用于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>

小提琴： http://jsfiddle.net/aq9Laaew/158451/

Bootstrap网格SM或XS无法正常工作

1 个答案: