将Container设置为垂直列而不是行

时间:2015-05-30 21:33:40

标签: html css twitter-bootstrap

我被赋予了编辑朋友的任务。网站。我非常有限的HTML / CSS知识。

请告诉我如何垂直(在列中)而不是在行中显示ffg代码。

示例是编辑器中的代码:

 <div class="content-section-a">

    <div class="container">

        <div class="column">
            <div class="col-lg-5 col-sm-6">
                <hr class="section-heading-spacer">
                <div class="clearfix"></div>
                <h2 class="section-heading">Member of the<br>Smartrac Group</h2>
                <p class="lead">Smartrac is a national consulting firm that provides creative and sustainable solutions to challenges facing the modern business</p>
            </div>
           <!-- <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                <img class="img-responsive" src="img/ipad.png" alt="">
            </div>-->
        </div>

    </div>
    <!-- /.container -->

</div>
<!-- /.content-section-a -->

<div class="content-section-b">

    <div class="container">

        <div class="column">
            <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                <hr class="section-heading-spacer">
                <div class="clearfix"></div>
                <h2 class="section-heading">Compliance in terms of :<br>Consumer Protection Act</h2>
                <p class="lead">All suppliers of goods and services will need to take note of the new measures and ensure that they are able to comply with the Act's requirements. Let us help you realise that.</p>
            </div>
             <!--<div class="col-lg-5 col-sm-pull-6  col-sm-6">
                <img class="img-responsive" src="img/dog.png" alt="">
            </div>-->
        </div>

    </div>
    <!-- /.container -->

这显示为与文本相对应的行和客户不再需要的pic的占位符,我已经注释掉了。

我如何仅显示文本,但在一行中相邻,例如一行中的列而不是单独的

1 个答案:

答案 0 :(得分:1)

您只需将两个块连成一行,然后移除col-lg-offset-1col-sm-push-6

<div class="container">

    <div class="row">
        <div class="col-lg-5 col-sm-6">
            <hr class="section-heading-spacer">
            <div class="clearfix"></div>
            <h2 class="section-heading">Member of the<br>Smartrac Group</h2>
            <p class="lead">Smartrac is a national consulting firm that provides creative and sustainable solutions to challenges facing the modern business</p>
        </div>
           <div class="col-lg-5  col-sm-6">
            <hr class="section-heading-spacer">
            <div class="clearfix"></div>
            <h2 class="section-heading">Compliance in terms of :<br>Consumer Protection Act</h2>
            <p class="lead">All suppliers of goods and services will need to take note of the new measures and ensure that they are able to comply with the Act's requirements. Let us help you realise that.</p>
        </div>
    </div>

</div>
<!-- /.container -->