如何在较大的屏幕上获得1个引导列,在较小的屏幕上突破2并堆叠在移动设备上?

时间:2017-08-22 20:43:10

标签: html twitter-bootstrap responsive

这是html:

<div class="container-fluid">
<div class="row fluid">
    <div class="nav clearfix">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
            <div class="hotel">
                <div class="hotel_img"></div>
                <h1>Accomodation</h1>
                <div class="bottom_border"></div>
                <p>
                    Perfect solution:
                    <span>hotel, apartment, hostel, guest house</span>
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
            <div class="tour">
                <div class="tour_img"></div>
                <h1>Tourist Attractions</h1>
                <div class="bottom_border"></div>
                <p>
                    Search your favorite:
                    <span>restaurant, museum, hotel, attractions</span>
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
            <div class="clearfix restaurant">
                <div class="restaurant_img"></div>
                <h1>Restaurants</h1>
                <div class="bottom_border"></div>
                <p>
                    You are hungry:
                    <span>chinese food, burgers, traditional foods</span>
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
            <div class="event">
                <div class="event_img"></div>
                <h1>Events & Tickets</h1>
                <div class="bottom_border"></div>
                <p>
                    It's time to have fun:
                    <span>concerts, cinema, exhibitions</span>
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
            <div class="coffee">
                <div class="coffee_img"></div>
                <h1>Coffee Shop</h1>
                <div class="bottom_border"></div>
                <p>
                    You must wake up:
                    <span>Starbucks, Filicori, Nescafe, Lavazza</span>
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
            <div class="gov">
                <div class="gov_img"></div>
                <h1>Government</h1>
                <div class="bottom_border"></div>
                <p>
                    Must see:
                    <span>parliament building, district court, royal house</span>
                </p>
            </div>
        </div>
    </div>
</div>

它不会破坏,而只是保持为1列并强制滚动条。 我希望它看起来像 1 2 3 4 5 6 1 2 3 4 5 6 并堆放在手机上。相反,它在任何屏幕尺寸上都保持1 2 3 4 5 6。代码对我来说是正确的,我不确定某些东西是否会阻止它破坏或者我是否只是做错了。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

  1. 确保导入Bootstrap库。粘贴的代码在没有它的情况下不会做任何事情。

  2. 对于小屏幕,使用col-12获取全宽,对于大屏幕,使用col-6获得半宽(并排列)。

    < / LI>

    &#13;
    &#13;
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="hotel">
                    <div class="hotel_img"></div>
                    <h1>Accomodation</h1>
                    <div class="bottom_border"></div>
                    <p>
                        Perfect solution:
                        <span>hotel, apartment, hostel, guest house</span>
                    </p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="tour">
                    <div class="tour_img"></div>
                    <h1>Tourist Attractions</h1>
                    <div class="bottom_border"></div>
                    <p>
                        Search your favorite:
                        <span>restaurant, museum, hotel, attractions</span>
                    </p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="clearfix restaurant">
                    <div class="restaurant_img"></div>
                    <h1>Restaurants</h1>
                    <div class="bottom_border"></div>
                    <p>
                        You are hungry:
                        <span>chinese food, burgers, traditional foods</span>
                    </p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="event">
                    <div class="event_img"></div>
                    <h1>Events & Tickets</h1>
                    <div class="bottom_border"></div>
                    <p>
                        It's time to have fun:
                        <span>concerts, cinema, exhibitions</span>
                    </p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="coffee">
                    <div class="coffee_img"></div>
                    <h1>Coffee Shop</h1>
                    <div class="bottom_border"></div>
                    <p>
                        You must wake up:
                        <span>Starbucks, Filicori, Nescafe, Lavazza</span>
                    </p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="gov">
                    <div class="gov_img"></div>
                    <h1>Government</h1>
                    <div class="bottom_border"></div>
                    <p>
                        Must see:
                        <span>parliament building, district court, royal house</span>
                    </p>
                </div>
            </div>
        </div>
    &#13;
    &#13;
    &#13;