Bootstrap Responsive - 如何在调整窗口大小时强制行到底

时间:2013-11-07 21:41:12

标签: html asp.net css asp.net-mvc twitter-bootstrap

我目前有一排6个按钮,每个按钮位于span2 div中,如下所示:

<div class="row">
    <div class="span2">
        <a href="@Url.Action("Contact", "Home")" class="detailsBtn"><i class="icon-eye-open icon-large"></i> Arrange a Viewing</a>
    </div>
    <div class="span2">
        <a href="@Url.Action("Contact", "Home")" class="detailsBtn"><i class="icon-mobile-phone icon-large"></i> Request a Callback</a>
    </div>
    <div class="span2">
         <a href="#" class="detailsBtn"><i class="icon-globe icon-large"></i> View Location Map</a>
    </div>
    <div class="span2">
         <a data-lightbox="fp" href="@Model.Property[0].Floorplan&width=1500" class="detailsBtn"><i class="icon-file-alt icon-large"></i> View Floorplan</a>
    </div>
    <div class="span2">
        <a href="@Model.Property[0].Brochure" target="_blank" class="detailsBtn"><i class="icon-file-text-alt icon-large"></i> View Brochure</a>
    </div>
    <div class="span2">
        @if(Model.Property[0].VirtualTour != null) {
            <a href="@Model.Property[0].VirtualTour" class="detailsBtn"><i class="icon-youtube-play icon-large"></i> Virtual Tour</a>
        }
    </div>
</div>

目前,当我调整窗口大小时,按钮显示在顶部,在任何内容(逐行)之前,如下所示:

按钮1 按钮2 按钮3 ..

我只需要知道是否有办法在下面的内容使用twitter bootstrap响应之后强制启动此行?任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

实际上你可以通过不使用bootstrap来实现这一点。

只需将按钮排放在容器内,并为其指定以下样式:

<style>
.buttons-wrap,
.content-wrap {
float:right;
}
</style>


<div class="content-wrap">
content here
</div>
<div class="buttons-wrap">
buttons code here
</div>

小心将它们按照上述顺序排列。