Question

我正在尝试弄清楚如何调整一些bootstrap CSS样式来修复我遇到的问题。

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

在我正在处理的页面上，我想在标题的页面右侧添加更多信息。

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

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

这是我想要完成的一个例子：

有没有办法可以在这个文本下移动这条线;或者可能是一个特殊的班级，如果需要可以帮助解决这个问题？

enter image description here

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>

创建：

enter image description here

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>与信息放在页面标题之前。然后将.pull-right上的课程<div>应用于信息。

这是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样式问题

3 个答案:

创建：