如何讓我的按鈕apear inline，文本旁邊？

Question

我剛開始使用bootstrap。我想創建一個這樣的網絡應用程序design

正如你所看到的，在tempriture旁邊顯示了一個攝氏和華氏按鈕。

我曾與我的努力沒有喜悅：

<div> 
    <h1 id="temperature" class="text-center inline">temperature</h1> 
     <div class="btn-group inline pull-right" data-toggle="buttons-checkbox"> 
      <div class="btn btn-primary unitButton">C</div> 
      <div class="btn btn-primary unitButton">F</div> 
     </div> 
</div> 

可有人請幫助我。感謝您的時間。

Answer 1

只需添加display:inline-block;到H1

#temperature{ 

display:inline-block; 

} 

，並從按鈕的DIV父脫下類pull-right：

<div> 
    <h1 id="temperature" class="text-center inline">temperature</h1> 
     <div class="btn-group inline" data-toggle="buttons-checkbox"> 
      <div class="btn btn-primary unitButton">C</div> 
      <div class="btn btn-primary unitButton">F</div> 
     </div> 
</div> 

Demo