Bootstrap CSS 样式问题

Question

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

我正在使用页面 header class 创建我的标题，该标题在我的所有页面中都是一致的。

在我正在处理的页面上，我想在 header.

页面右侧添加更多信息

任何时候我试图让它出现在线的上方，它只是在下方或中间并且线似乎没有移动。

<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>

这是我要完成的示例：

有什么办法可以把这段文字下移吗？或者如果需要的话，可能需要一个特殊的 class 来帮助解决这种情况？

Answer 1

这将是一个仅 Bootstrap 的解决方案：(Example)

<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> 上应用 class .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>

Bootstrap CSS 样式问题

Bootstrap CSS Style Issue

html

css

twitter-bootstrap

twitter-bootstrap-3

创建：