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

【问题标题】：Bootstrap Responsive - How to force row to bottom when resizing windowBootstrap Responsive - 调整窗口大小时如何强制行到底部
【发布时间】：2013-11-19 18:21:57
【问题描述】：

我目前有一排 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 响应式强制此行在以下内容之后开始？任何帮助将不胜感激。

【问题讨论】：

为什么要在调整浏览器大小时导航出现在内容之后？最好先将导航放在顶部，这样访问者不必滚动浏览所有内容即可到达导航栏，如果它在顶部，他们只需在加载的第二秒点击它即可。
这不是导航栏。这些只是出现在导航栏和下面的内容（由属性信息组成）之间的简单按钮。我只需要知道如何将它们推到底部，因为我希望移动访问者在决定点击按钮之前先查看属性信息。
考虑在页面底部有另一个相同的按钮容器 div 以及样式：display:none;。然后，根据需要使用媒体查询使 2 个 div 之一可见。
是的，这就是我最终决定做的事情。谢谢'srvikram13。

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

【解决方案1】：

实际上，您完全可以不使用引导程序来实现这一点。

只需将您的按钮行放入容器中，并为其赋予以下样式：

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


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

注意按上述顺序排列。

【讨论】：