Question

我的小例子里有here。我正在使用bootstrap。我想做的是拥有＆＃39; 150＆＃39;以及＆＃39;点＆＃39;紧挨着在同一排。这可能吗？我怎么能这样做？

我的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;
}

<强> Working Fiddle

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>

使用bootstrap将两个对象放在同一行中

3 个答案: