使用 Twitter Bootstrap 使网站具有响应性答案

【问题标题】：Making a Website Responsive with Twitter Bootstrap使用 Twitter Bootstrap 使网站具有响应性
【发布时间】：2013-05-16 02:15:50
【问题描述】：

我已经在网站上工作了一段时间，并且大部分网站都建立在 twitter 引导程序上。该站点对于大于 900 像素但小于 900 像素的浏览器看起来很棒，但列开始重叠并且看起来很糟糕。我想知道是否有任何建议可以防止这种重叠，例如 CSS 选项和一些 HTML 工作。它发生在很多领域，但这里是一个例子。我知道这个有一些问题，因为我将宽度设置为比列宽，但这样看起来最好。

<div class="row">
        <span class="span8">
            <h2>Some Title!</h2>
            <ul>
                <li>stuff here</li> 
                <li>I have some stuff here</li>
            </ul>
            <div class="alert alert-warning center-it">
                You can share if you <a href="/login">login or register</a>
            </div>  
            <br>
        </span>

        <form method="get">
            <span class="span4">
                <input type="search" placeholder="Search for the location" style="width:300px; height: 30px;" class="pull-right" name="location" size="55" /><br><br><br>
                <span class="pull-right">
                    <h4>Within: 
                        <select name="radius">
                            <option value="25">25 miles</option>
                            <option value="50">50 miles</option>
                            <option value="100" selected>100 miles</option>
                            <option value="200">200 miles</option>
                            <option value="400">400 miles</option>
                        </select>
                    </h4>
                    </span>
                    <br><br><br>
                    <input class="btn pull-right" type="submit">
            </span>
        </form>
    </div>

【问题讨论】：

您是否包含了响应式 css 并添加了元视口标签？
是的，我有，请参阅对 Rishi 回答的评论

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

我遇到了同样的问题。正如您在Bootstrap's Live Grid Example 的评论中看到的那样：“低于 767 像素的视口，列变得流畅并垂直堆叠”。恐怕您（我们）对此无能为力。

第一次，我也印象深刻。如果我正在构建一个带有左侧（和/或）右侧边栏的网格系统，我希望左右侧边栏是左右的，而不是堆叠到主列的顶部和底部。但是，在重新考虑这个想法之后，我同意妥协，这就是网格/流体网格系统在 Bootstrap 中的工作方式。 Bootstrap 是最好的或响应式设计的最佳框架之一，所以我认为，我们必须接受它的工作原理，而不是试图让轮子更像样方，对吧？

我为您看到的唯一选择是退出基于列的布局。或者接受使用它时，您的列将重叠并垂直堆叠在小视口上。

如果您正在设计一个移动应用程序，有某种解决方案，您可以强制您的应用程序仅在横向模式下运行，并在其中设置侧边栏，您可以在其中设计它们。但是，当您处理移动网站时，我看不到您可以做的更多。

【讨论】：

这不是妥协，而是设计使然。在手机上，左右列的网格不太方便，因此 bootstrap 将它们堆叠在一起。这对我来说很有意义。
正如我在回答中所写，现在对我来说也很有意义！ :]

【解决方案2】：

下载bootstrap.css和bootstrap-responsive.css，放到bootstrap目录下试试这个代码：

<!DOCTYPE html>
    <html lang="en"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="bootstrap/bootstrap.css" rel="stylesheet">
     <link href="bootstrap/bootstrap-responsive.css" rel="stylesheet">
     </head>

      <body>
       <div class="row">
            <span class="span8">
                <h2>Some Title!</h2>
                <ul>
                    <li>stuff here</li> 
                    <li>I have some stuff here</li>
                </ul>
                <div class="alert alert-warning center-it">
                    You can share if you <a href="/login">login or register</a>
                </div>  
                <br>
            </span>

            <form method="get">
                <span class="span4">
                    <input type="search" placeholder="Search for the location" style="width:300px; height: 30px;" class="pull-right" name="location" size="55" /><br><br><br>
                    <span class="pull-right">
                        <h4>Within: 
                            <select name="radius">
                                <option value="25">25 miles</option>
                                <option value="50">50 miles</option>
                                <option value="100" selected>100 miles</option>
                                <option value="200">200 miles</option>
                                <option value="400">400 miles</option>
                            </select>
                        </h4>
                        </span>
                        <br><br><br>
                        <input class="btn pull-right" type="submit">
                </span>
            </form>
        </div>

    </body></html>

【讨论】：

对不起，我想我不够清楚。我拥有所有这些，它正在响应，但是当它为较小的浏览器调整大小时，文本输入、下拉列表和其他固定宽度的 HTML 元素会重叠并挤在一起。除了修改整个布局之外，还有什么解决办法吗？
afaik 响应性不是固定宽度的 HTML 元素..因此您需要修改布局以使其具有响应性..

【解决方案3】：

如果理解正确，您的输入元素和其他 div 是重叠的。如果这是您遇到的问题，请在输入元素和 div 上设置 span* 类值。此外，span 元素不应用作其他 HTML 的容器。

这个快速通过对我来说看起来更好：

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <link href="resources/css/bootstrap.css" rel="stylesheet"/>
 </head>

  <body>
   <div class="row">
        <div class="span8">
            <h2>Some Title!</h2>
            <ul>
                <li>stuff here</li> 
                <li>I have some stuff here</li>
            </ul>
            <div class="alert alert-warning center-it span6">
                You can share if you <a href="/login">login or register</a>
            </div>  
            <br/>
        </div>

        <form method="get">
            <div class="span4">
                <input type="search" placeholder="Search for the location" class="pull-right span4" name="location" size="55" />
                <br/><br/><br/>
                <div class="pull-right">
                    <h4>Within: 
                        <select name="radius">
                            <option value="25">25 miles</option>
                            <option value="50">50 miles</option>
                            <option value="100" selected="selected">100 miles</option>
                            <option value="200">200 miles</option>
                            <option value="400">400 miles</option>
                        </select>
                    </h4>
                </div>
                <br/><br/><br/>
                <input class="btn pull-right" type="submit"/>
            </div>
        </form>
    </div>

</body></html>

【讨论】：