使用引导程序将两个对象放在同一行中

Question

我在这里摆弄我的榜样。 我正在使用引导程序。 我想要做的是将“ 150”和“点”彼此排在同一行中。 这可能吗？ 我怎样才能做到这一点？

我的html看起来像这样：

<div class="container">
 <div class="row">
  <div class="col-md-6">
   <h4>Content Submissions: </h4>

  </div>
  <div class="col-md-6">
   <div class="col-md-4 pull-right">
     <h2>user name</h2>
     <div class="row-fluid">
      <h2><strong>150 </strong></h2>
      <p><small>Points</small></p>
     </div>
     <a href="#" class="btn btn-success btn-block"> Account Settings </a>
   </div>
  </div>
 </div>
</div>

Answer 1

.row-fluid {
    display: flex;
    align-items: center;
}

h2 {
    margin-top: 0;
    margin-right: 10px;
}

Answer 2

使用以下CSS：

.row-fluid {
    display: flex;
}

h2 {
    margin-top: 0;
}

工作小提琴

Answer 3

嗨，我对您的html所做的更改很少，请尝试以下操作

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h4>Content Submissions: </h4>

    </div>
    <div class="col-md-6">
      <div class="col-md-4 pull-right">
        <h2>user name</h2>
        <div class="row-fluid">
         <div class="col-lg-6 col-xs-6">
         <h2><strong>150 </strong></h2>
         </div>
         <div class="col-lg-6 col-xs-6">
         <p><small>Points</small></p>
        </div>
        </div>
        <a href="#" class="btn btn-success btn-block"> Account Settings </a>
      </div>
    </div>
  </div>
</div>


<style>
    h2{margin:0;}
</style>