Twitter Bootstrap Navbar：[左键 - 中心文本 - 右键]？ II

Question

https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-button的问题@twilight-pony-inc已经关闭。

我认为问题应该是：我可以使用Twitter的Bootstrap构建一个移动应用程序，它看起来像一个原生应用程序。或者更具体地说，如何在右侧和左侧构建一个带有小按钮的导航栏。

示例：

标题为“Temp”的蓝色标题（导航栏）以及“返回”和“主页”按钮应使用Twitter的Bootstrap构建。

Answer 1

有趣的问题。 @ 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 boostrap构建这样的布局。首先阅读网格：http://twitter.github.io/bootstrap/scaffolding.html#gridSystem。从导航栏的行开始，然后将其拆分为列：

<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

这将为您提供一个带有两个按钮的导航栏。但在小型/移动屏幕（低于768像素）上，您的布局会中断。低于768 px yor列（具有类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;}
}  

这将在小屏幕上创建一个包含三列的行。请参阅：http://www.bootply.com/66054或下图：

CSS使移动布局流动，导致colums宽度按百分比设置（连续100％）。

Twitter的Bootstrap 3 TB3默认具有流体布局。 TB3有两个网格大网格，用于768+像素宽屏幕和一个小型移动网格。因为您可以使用移动网格，您不需要媒体查询来获得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定义了三个网格：手机的小网格（＆lt; 768px），平板电脑的小网格（＆gt; 768px）和Destkops的中大网格（＆gt; 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>

请参阅：http://bootply.com/73382