0

私はしばらくの間ウェブサイトに取り組んでいて、サイトのほとんどはツイッターのブートストラップで構築されています。このサイトは、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- sensitive.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がレスポンシブデザインに最適な、または最高のフレームワークの1つである多くのことは、それが機能するように受け入れる必要があり、ホイールをより四角形にしようとしないでください。

私があなたに見る唯一のオプションは、列ベースのレイアウトから辞任することです。または、それを使用するときに、列が重なり合って小さなビューポートに垂直にスタックすることを受け入れます。

モバイルアプリを設計している場合は、アプリをランドスケープモードでのみ動作させ、設計した場所にサイドバーを配置するという、ある種の解決策があります。しかし、あなたがモバイルWebサイトを扱っているとき、私はあなたができることをあまり見ていません。

于 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 に答える