html - 如何更改文本位置

Question

目前我的容器 View :

我试着这样设置:

HTML

<div class="container-fluid bg-3" text-center> 
<div class="row">
    <h2><center>FAQ</center></h2>
    <div class="col-sm-3"></div>
    <div class="col-sm-5" style="margin-left:50px; margin-right=-50px;">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</strong></p>
        <p style="margin-bottom:30px;">Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
        <p><strong>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus?</strong></p>
        <p style="margin-bottom:30px;">Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</strong></p>
        <p style="margin-bottom:30px;">Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
        <p><strong>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus?</strong></p>
        <p style="margin-bottom:50px;">Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
    </div>
    <div class="col-sm-4"></div>
    <p><strong>Got more questions? write to us:</strong></p>
    <div class="row clearfix">
        <div class="col-lg-4 col-sm-4"></div>
        <div class="col-lg-4  col-sm-4">
            <button style="width:100%" type="submit" class="btn-outlined btn-black btn-lg btn-group">ASK QUESTION</button>
        </div>
        <div class="col-lg-4 col-sm-4"></div>
    </div>
</div>

我不知道如何让文本居中然后向左对齐。当我添加边距时，一切都是错误的。我应该使用 col-xs-* & text-center 还是其他什么？

Answer 1

如果你想让一些列居中，你应该尝试使用 col-[mediabreakpoint]-offsett-[number]。我假设您使用的是 Bootstrap 3.x，因为 BS 4 的语法不同。在您的情况下，您应该尝试这样做:

<div class="row clearfix">
    <div class="col-lg-4  col-sm-4 col-sm-offset-4">
        <button style="width:100%" type="submit" class="btn-outlined btn-black btn-lg btn-group">ASK QUESTION</button>
    </div>
    <div class="col-lg-4 col-sm-4"></div>
</div>

有关更多信息，请查看这些 examples

为了在正确的位置显示问题，您应该嵌套在“列”div 中。