Bootstrap CSS样式问题

Question

我正在尝试找出如何调整一些引导CSS样式来解决我遇到的问题。

我正在使用页面标题类来创建我的标题，该标题在我所有页面上都一致。

在我正在处理的页面上，还有一些我想添加到页面右侧标题中的信息。

每当我尝试使它显示在线条上方时，它就位于线条的下方或中间，并且线条似乎没有移动。

小提琴： http : //jsfiddle.net/rka18Lze/

<div class="container">
  <div class="page-header">
    <h3 class="text-info">A page header here</h3>
  </div>
  <div class="row">
    <div class="col-md-4 col-md-offset-8 text-right">
      <h5 class="text-info">Owner: <a href="#" target="_blank">Bob Smith</a></h5>
      <h5 class="text-info">Type: Desktop</h5>
      <h5 class="text-info">Status: Active</h5>
    </div>
  </div>
</div>

这是我要完成的示例：

有什么办法可以使该行在此文本下移动吗？ 还是如果需要，可以开设一门特殊的课程来解决这种情况？

Answer 1

这将是仅引导程序的解决方案：（ 示例 ）

<div class="container">
    <div class="page-header row">
      <div class="col-xs-6 col-sm-6 col-sm-6 col-md-8">
        <h3 class="text-info">A page header here</h3>
      </div>
      <div class="col-xs-6 col-sm-6 col-sm-6 col-md-4 text-right">
          <h5 class="text-info">Owner: <a href="#" target="_blank">Bob Smith</a></h5>
          <h5 class="text-info">Type: Desktop</h5>
          <h5 class="text-info">Status: Active</h5>
      </div>
  </div>
</div>

创建：

Answer 2

您应该为两个元素使用同一行。 看一看：

<div class="container">
  <div class="row">
      <div class="col-xs-8">
        <div class="page-header">
        <h3 class="text-info">A page header here</h3>
       </div>
  </div>
  <div class="col-xs-4 text-right">
  <h5 class="text-info">Owner: <a href="#" target="_blank">Bob Smith</a></h5>
  <h5 class="text-info">Type: Desktop</h5>
  <h5 class="text-info">Status: Active</h5>
</div>

http://jsfiddle.net/jozreLj2/

Answer 3

您将需要定位<div>与信息第一之前<div>与页头。 然后在<div> .pull-right类.pull-right与信息一起应用。

这是一个jsfiddle

<div class="container">

    <div class="row pull-right">
        <div class="col-md-4 col-md-offset-8 text-right">
            <h5 class="text-info">Owner: <a href="#" target="_blank">Bob Smith</a></h5>
            <h5 class="text-info">Type: Desktop</h5>
            <h5 class="text-info">Status: Active</h5>
        </div>
    </div>

    <div class="page-header">
        <h3 class="text-info">A page header here</h3>
    </div>

</div>