0

我已经在一个网站上工作了一段时间，并且大部分网站都建立在 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>
4

3 回答 3

0

下载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>
于 2012-11-01T09:01:24.407 回答
0

我遇到了同样的问题。正如您在对Bootstrap 的实时网格示例的评论中看到的那样：“在 767px 视口以下，列变得流畅并垂直堆叠”。恐怕您（我们）对此无能为力。

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

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

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

于 2013-02-15T09:14:06.200 回答
0

如果理解正确，您的输入元素和其他 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>
于 2013-05-15T18:15:50.653 回答