@twilight-pony-incによる質問https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-buttonはクローズされました。
問題は次のとおりだと思います。Twitter の Bootstrap を使用して、ネイティブ アプリのように見えるモバイル アプリを構築できますか。または、左右にタイトルとボタンを備えたナビゲーションバーを構築するより具体的な方法。
例：
タイトルが「Temp」でボタンが「戻る」と「ホーム」の青いヘッダー (ナビゲーション バー) は、Twitter の Bootstrap で作成する必要があります。
興味深い質問です。@twilight-pony-inc が求めていることは些細なことのように見えますが、そうではありません。Twitter の Bootstrap は、「レスポンシブ」な考え方で構築されています。TBでのレイアウトビルドは、それを示すデバイスに採用されます。あなたが与える例は、jQuery Mobile のようなモバイル フレームワークで構築されているようです。モバイル フレームワークは、モバイル アプリの構築に使用できます (のみ)。最近では、モバイル フレームワークの応答性が向上しており、Twitter の Bootstrap の次期バージョンでは、モバイル ファーストのアプローチが採用されています。Twitter の Bootstrap 3 にもモバイル グリッドがあります。( http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.htmlおよびhttp://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpointsも参照してください) -and-grid/ )
最初に、Twitter の Bootstrap の代わりにモバイル フレームワークが必要かどうかを検討してください。次に、Twitter の Bootstrap 3 を使用することを検討してください。これにより、モバイル開発が容易になります。
もちろん、twitter ブーストラップでもこのようなレイアウトを構築できます。最初にグリッドについて読んでください: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem。navbar の行から始めて、列に分割します。
<div class="container navbar">
<div class="row">
<div class="span3 text-left"><button class="btn">back</button></div>
<div class="span6 text-center"><h3>Title (centered)</h3></div>
<div class="span3 text-right"><button class="btn">Home</button></div>
</div>
</div>
ここで流体グリッドも検討してください: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
これにより、2 つのボタンがあるナビゲーション バーが表示されます。ただし、小さい/モバイル画面 (768 ピクセル未満) では、レイアウトが崩れます。768 ピクセル以下の列 (クラス spanX の div) はスタックされます (そして 100% の幅になります)。メディア クエリを使用してこれを修正できます。
@media (max-width:767px)
{
.navbar div[class*="span"] { float: left;} /* float left */
.navbar div.span3 { width:25%; }
.navbar div.span6 { width:50%; }
body {padding:0;}
}
これにより、小さな画面でも 3 列の行が作成されます。参照: http://www.bootply.com/66054または下の画像:
CSS により、モバイル レイアウトが流動的になり、列の幅がパーセンテージ (100% 連続) で設定されます。
Twitter の Bootstrap 3
TB3 は、デフォルトで流動的なレイアウトになっています。TB3 には、768 ピクセル以上の幅の画面用の大きなグリッドと小さなモバイル グリッドの 2 つのグリッドがあります。モバイル グリッドを使用できるため、TB3 で上記のようなレイアウトを取得するためにメディア クエリは必要ありません。TB3 では、列の幅は col-span-{X} クラスによって設定されます。同様に、小さいグリッドの場合、col-small-span-{X} を使用して幅を設定します。
したがって、Twitter の Bootstrap 3 を使用すると、次のようにナビゲーション バーを作成できます。
<div class="container navbar">
<div class="row">
<div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div>
<div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Twitter の Bootstrap 3 では、3 つのグリッドが定義されています。スマートフォン用の小さなグリッド (<768px)、タブレット用の小さなグリッド (>768px)、および Destkops 用の中規模大規模グリッド (>992px) です。これらのグリッドの行クラスのプレフィックスは、「.col-」、「.col-sm-」、および「.col-lg-」です。中規模から大規模のグリッドは、画面幅 992 ピクセル未満でスタックされます。768 ピクセル未満の小さなグリッドも同様であり、小さなグリッドはスタックしません。常に要素を積み重ねる古い電話を除いて（モバイルファーストのデザイン）。
このため、モバイル アプリには「.col-」プレフィックスを使用する必要があります。
<div class="container navbar">
<div class="row">
<div class="col-3 text-left"><button class="btn btn-default">back</button></div>
<div class="col-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-3 text-right"><button class="btn btn-default">Home</button></div>
</div>
</div>