html - 将容器设置为垂直列而不是行

Question

我接到了编辑 friend 网站的任务。我的 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 -->

这显示为横跨文本的一行和客户不再需要的图片的占位符，我已将其注释掉。

我如何只显示文本，但在一行中的列中垂直彼此相邻，而不是单独显示

Answer 1

您只需将两个 block 排成一行并删除 col-lg-offset-1 和 col-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 -->