4

コミュニティ、

私は最近、実際に「デザイン」することができなくても Web ページをデザインする可能性を探しているときに、Twitter Bootstrap に出くわしました (コーダークリシェ、meh)。私はその瞬時の相互互換性の大ファンを得ており、このサイトはブログを念頭に置いて計画されているため、モバイル ユーザーがアクセスすることは不可能ではないと考えています.

そして、その特定のブログが私に問題を引き起こしています。グリッド全体 (span12、最大幅 1170 ピクセル) にまたがるブログ投稿を作成すると、巨大なテキストの壁が作成され、誰もが怖がって離れてしまいます。代わりに、span6 で (少なくともプレビューを) 作成することにしました。これは私にとって合理的であり、モバイル ユーザーにも適しています。しかし、1 行に 1 つしか配置したくないので、どうにかして中央に配置する必要があり、「ブートストラップの方法」で行うことをお勧めします。

公式ドキュメントでは、.offset* クラスを指摘されました。これはデスクトップではうまく機能しますが、モバイル レイアウトに切り替えると保持され、左側に醜いギャップが生じます。オフセットがなければ、モバイル バージョン (行ごとに 1 つの投稿、左右のギャップなし) では問題なく動作しますが、デスクトップでは左揃えになります。ここに関連するコードのビットがあります：

オフセットなし、モバイル デバイスで意図したとおりに動作:

<div class="row-fluid">
    <div class="span6">
        <h3>Blog Post #1 Title</h3>
        <h5>Category, Sub-Category - 01.01.1970</h5>
        <p>Lorem ipsum...</p>
    </div><!--/span6-->
</div><!--/row-->

オフセットを使用すると、デスクトップで意図したとおりに動作します。

<div class="row-fluid">
    <div class="span6 offset3">
        <h3>Blog Post #1 Title</h3>
        <h5>Category, Sub-Category - 01.01.1970</h5>
        <p>Lorem ipsum...</p>
    </div><!--/span6-->
</div><!--/row-->

私が望むように動作させる方法はありますか（JavaScriptなしで！）（すべてのテキストを左揃えに保ちながら、要素の相互互換性のある中央揃え）？bootstrap-responsive.css を変更する必要があると思いますが、元のファイルをいじるのは控えたいと思います...

4

1 に答える 1

4

どういうわけか、CSSを変更しなくても、完全に正常に機能していることがわかったのです。

グリッドシステムを使用して要素を中央に配置するには、行の残りの部分をプレースホルダーで埋めます。私のspan6-例では

<div class="row-fluid">
    <div class="span3"></div>
    <div class="span6">
        <h3>Blog Post #1 Title</h3>
        <h5>Category, Sub-Category - 01.01.1970</h5>
        <p>Lorem ipsum...</p>
    </div>
    <div class="span3"></div>
</div>

これにより、デスクトップとタブレットでは中央バージョンになり、電話では全幅バージョンになります。ただし、流動的なレイアウトのため、空のdivも少量のスペースを使用するため、モバイルレイアウトにはギャップがあります。ただし、この問題は電話でのみ発生するため、次のように、hidden-phone- classをplaceholder-divに追加することで回避できます。

<div class="row-fluid">
    <div class="span3 hidden-phone"></div>
    <div class="span6">
        <h3>Blog Post #1 Title</h3>
        <h5>Category, Sub-Category - 01.01.1970</h5>
        <p>Lorem ipsum...</p>
    </div>
    <div class="span3 hidden-phone"></div>
</div>

そして、最終的には、少なくともBootstrapバージョン2.1.0では、意図したとおりに機能します...

于 2012-08-25T14:54:59.783 に答える