时间戳

首页 > 解决方案 > 使用引导程序 4.0 将一行与中心对齐

css - 使用引导程序 4.0 将一行与中心对齐

问题描述

我有以下使用引导程序 4 的标记：-

<div class="container">
    <div class="row">

        <div class="col-xl-4 col-md-6 col-lg-4">
            <div class="footer_widget">
                <h3 class="footer_title">
                    Enter your number
                </h3>
                <form asp-action="Search" method="get" class="newsletter_form">
                    <input type="text" name="number" placeholder="Enter your number" style="height: 50px;
background: #fff;
padding-left: 20px;
font-size: 15px;
color: #000;
border: 1px solid #596672;
border-radius: 30px;
width: 100%;">
                    <button type="submit" style="
    position: absolute;
    height: 40px;
    border: none;
    color: #fff;
    background: #2EBDBE;
    padding: 0 22px;
    cursor: pointer;
    border-radius: 30px;
    top: 5px;
    right: 5px;
    font-size: 13px;
    font-weight: 500;">
                        Submit
                    </button>
                </form>
                <p class="newsletter_text">
                    Enter your number/name and click on submit ....
                </p>
            </div>
        </div>

    </div>
</div>

目前内容将向左对齐，但我希望它与中心对齐，那么我如何使用引导程序来做到这一点？

标签： csstwitter-bootstrapbootstrap-4

解决方案

Bootstrap 4 有实用程序类来实现这一点，因此请尝试使用以下justify-content-center类row：

<div class="container">
    <div class="row justify-content-center">

        <div class="col-xl-4 col-md-6 col-lg-4">
            <div class="footer_widget">
                <h3 class="footer_title">
                    Enter your number
                </h3>
                <form asp-action="Search" method="get" class="newsletter_form">
                    <input type="text" name="number" placeholder="Enter your number" style="height: 50px;background: #fff;padding-left: 20px;font-size: 15px;color: #000;border: 1px solid #596672;border-radius: 30px;width: 100%;">
                    <button type="submit" style="position: absolute;height: 40px; border: none;color: #fff;background: #2EBDBE; padding: 0 22px; cursor: pointer; border-radius: 30px; top: 5px; right: 5px; font-size: 13px; font-weight: 500;">
                        Submit
                    </button>
                </form>
                <p class="newsletter_text">
                    Enter your number/name and click on submit ....
                </p>
            </div>
        </div>

    </div>
</div>

希望能帮助到你

推荐阅读