Question

我已经在网站上工作了一段时间，并且大部分网站建立在Twitter bootstrap上。该网站看起来非常适合大于900px的浏览器，但小于列开始重叠并且看起来非常糟糕的浏览器。我想知道是否有任何建议，以防止这种重叠，如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>

Answer 1

下载 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>

Answer 2

我遇到了同样的问题。正如您可以在对Bootstrap's Live Grid Example的评论中读到的那样：“低于767px视口，列变得流畅且垂直堆叠”。我担心你（我们）可以做的事情并不多。

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

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

如果您正在设计移动应用程序，那么可以使用某种解决方案，您可以强制您的应用仅以横向模式工作，并在那里设置侧边栏。但是，当你处理移动网站时，我看不到你能做的更多。

Answer 3

如果理解正确，您的输入元素和其他div是重叠的。如果这是您遇到的问题，请在输入元素和div上设置span * class值。此外，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>

使用Twitter Bootstrap响应网站

3 个答案: