Question

<div class="row rowItem">

<div class="labelTitle col-sm-3">
    <h2>Section Title</h2>
</div>


<div class="labelTitle col-sm-offset-6">
    <h2>Section Title</h2>
</div>


<div class="col-sm-3">
    <div class="image">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
    </div> 

    <div class="text">
        <h4 class="font-bold">
            <a href="#">Title</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p> 
    </div> 
</div>

<div class="col-sm-3">
    <div class="image">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
    </div> 

    <div class="text">
        <h4 class="font-bold">
            <a href="#">Title</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p> 
    </div> 
</div>


<div class="col-sm-3">

    <div class="image">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
    </div> 

    <div class="text">
        <h4 class="font-bold">
            <a href="#">Title</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p> 
    </div> 
</div>

您可以在http://diegopalma.com/test/

找到示例

最后一行有3列。前两列属于一个部分标题，第三列有另一个部分标题。

我设法使用第二个标题的偏移类在桌面上正确显示它，但当然我的方法不适用于移动设备。

有任何想法或建议吗？

Answer 1

这是你要找的吗？

<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class=" col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
            <div class="col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
        </div><!--/.row-->
    </div><!--/.col-->

    <div class="col-xs-12 col-sm-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
            <div class="col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
        </div><!--/.row-->
    </div><!--/.col-->
</div><!--/.row-->

Answer 2

您需要创建一些自定义css来处理它或嵌套容器。

<强> HTML

<div class="row">
    <div class="col-md-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class="col-sm-6">
                <div class="image">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/367x245" title="">
                    </a>
                </div>

                <div class="text">
                    <h4 class="font-bold">
                        <a href="#">Title</a>
                    </h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="image">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/367x245" title="">
                    </a>
                </div>

                <div class="text">
                    <h4 class="font-bold">
                        <a href="#">Title</a>
                    </h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class="col-sm-6">

                <div class="image">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/367x245" title="">
                    </a>
                </div>

                <div class="text">
                    <h4 class="font-bold">
                        <a href="#">Title</a>
                    </h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p>
                </div>
            </div>

        </div>
    </div>

</div>

我在同一行中有两个标题，但我不知道如何布局页面以使其在移动设备上运行

2 个答案: