Question

目前正在使用bootstrap，在桌面中我得到的结构完全如下

column1 column2 column3 column4 column5

但在平板电脑视图

我需要得到以下结构

column1  `column3`
column2   column4` column5

这是我的HTML代码

<footer class="footer">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-2 footer-Darkerblue">
                <p class="footer-ul footer-text-align">
                    <span class="footer-headtext text-uppercase">destination</span><br/>
                    <span class="footer-Kilomet">6.8 Kms </span>
                    <span class="footer-min">25 Min away</span>
                </p>

            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-2 footer-Darkenblue">
                <ul class="footer-ul footerstatus-text-align">
                    <li class="footer-headtext text-uppercase">
                        Status
                    </li>
                    <li class="footer-min-text">
                        In Transit
                    </li>                       
                </ul>
            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-4 col-md-push-6">
                <div class="dotted">
                    <ul class="footer-ul footer-direction-text">
                        <li>
                            <i class="fa fa-circle-o direction-icon-circle"></i>
                                <div class="footer-map-text">Geo-Refer Enterprises Inc., Flat B, 39 Acacia Avenue,
                                North End, Silhurst, Loamshire, SH15 6BP</div>
                        </li>
                        <li class="footer-li-pad">
                            <i class="fa fa-map-marker direction-icon"></i>
                                <div class="footer-map-text">As Directed</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-2 col-xs-2 footer-left-border">
                <ul class="footer-ul">
                    <li>
                        DATE
                    </li>
                </ul>
                <ul class="footer-ul list-inline footer-text-date">
                    <li>
                        <em class="fa fa-calendar"></em> 25 Dec, 2015
                    </li>
                    <li>
                        <em class="fa fa-clock-o"></em> 16:30
                    </li>
                </ul>
            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-2  col-xs-2 footer-left-border">
                <ul class="footer-ul">
                    <li>
                        BOOKING REFERENCE
                    </li>
                    <li class="footer-li-pad">
                        92737260
                    </li>
                </ul>
            </div>
        </div>
    </footer>

使用我的代码

实际上我用上面的代码得到了桌面版

但不适用于平板电脑

第1列和第2列一个在另一个之下但是第3列没有从第1列开始，它从第2列开始

请在我做错的地方帮助我

由于

Answer 1

您可以像这样构建它：

<div class="col-xs-12 col-md-4">
    <div class="column1 col-xs-2 col-md-6"></div>
     <div class="column3 col-xs-2 col-md-6"></div>
</div>
<div class="col-xs-12 col-md-8">
    <div class="column2 col-xs-2 col-md-4"></div>
    <div class="column4 col-xs-2 col-md-4"></div>
    <div class="column5 col-xs-2 col-md-4"></div>
</div>

引导程序中的rowspan和colspan

1 个答案: