@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 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 像素的列（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 使移动布局变得流畅，因为列宽是按百分比设置的（连续 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 定义了三个网格：用于手机的小网格 (<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>