Bootstrap-根据方向更改网格

时间:2015-11-18 14:35:44

标签: html css twitter-bootstrap

我希望创建一个在横向模式下以两列显示但在纵向模式下切换到一列的页面。以下是我的意愿:
横向

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6">image goes here</div>
            <div class="col-xs-6">text goes here</div>
        </div>
    </div>
</body>

人像:

<body>
    <div class="container-fluid">
        <div class="row">
            image goes here
        </div>
        <div class="row">
            text goes here
        </div>
    </div>
</body>

如何使用Bootstrap实现此目的?

1 个答案:

答案 0 :(得分:0)

如果引导列不起作用,则可以使用媒体

@media screen and(orientation:portrait){...} //定义宽度100%

@media screen and(orientation:landscape){...} //定义宽度50%