定位列Bootstrap

时间：2016-02-17 18:55:11

标签： twitter-bootstrap-3 position

我正在使用bootstrap。我需要移动列，如附图所示。

enter image description here

2 个答案:

答案 0 :(得分：1)

    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>EE</title>
        <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.9.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="col-md-3  col-sm-6 col-md-push-3">
                <div class="alert alert-info" style="width:10px">2</div>
            </div>
            <div class="col-md-3 col-sm-6 col-md-push-6">
                <div class="alert alert-info " style="width:10px">4</div>
            </div>
            <div class="col-md-3 col-sm-6 ">
                <div class="alert alert-info " style=" width:10px">3</div>
            </div>
            <div class="col-md-3  col-sm-6 col-md-pull-8">
                <div class="alert alert-info" style="width:10px">1</div>
            </div>
        </div>
    </body>
    </html>

答案 1 :(得分：0)

您是否尝试使用.col-md-push-*和.col-md-pull-*？示例：http://www.schmalz.io/2014/10/08/Column-Ordering-in-Bootstrap/

相关问题
最新问题