Question

目前查看我的容器：

我尝试这样设置：

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- *＆amp;文本中心或其他什么？

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

要在正确的位置显示问题，您应该在“＆＃39;列”中嵌套。格。

Answer 2

您的问题文本与主文本位于同一行。

把它放在另一行（你试图做但是错误的div嵌套错过了它）或者把它放在与主文本div（或列）相同的div中。

具有类行和clearfix的div应移出其当前父

Answer 3

鉴于你的html的结构，最简单的是以下...基本上只是添加text-align：center;对于整个容器，然后覆盖“内容”左对齐

#container{
    width: 75%;
  
    margin: 0px auto;
    text-align: center;
}
#content{
    text-align: left;
}

<div id="container">
    <p id="title">FAQ</p>
    <div id="content">
        All your content here
    </div>
    <div id="footer">
        <p>If you got questions, write to us</p>
        <input type="text" value=""/>
    </div>
</div>

如何更改文字地点

3 个答案: