ブートストラップ3は 'btn-group'を使用して整列します

Question

新しいブートストラップ3は高く評価されますが... 5列のテーブルを作成しました。 最後の3列には2 x 'a href'と1 x 'form'が含まれていますが、みんなが30 x 30のサイズのボタンとして機能します。 フォームはブロック要素であり、互いに1列に並んでいる。

だから私のソリューションは、これまで：

<table> 
<tr> 
    <td colspan="3"> 
    <div class="btn-toolbar"> 
    <div class="btn-group"> Link 1 </div> 
    <div class="btn-group"> Link 2 </div> 
    <div class="btn-group"> Form 1 </div> 
    </div> 

これは素晴らしい作品。しかし、私はこれらの3つのオブジェクトを自分のセルの右側に揃えたいと思います。 私はそれを正しく整列させるための方法はありません。

<div class="btn-toolbar text-right"> 

は作業しないでください！

<tr colspan="3" class="text-right"> 

Do not work！

<div class="btn-toolbar pull-right"> 

Works！

しかし、これが正しい方法であるかどうかは本当に不透明です。 私にとっては、それは多くのネストされたコードです。

少ないコードでこれを解決する方法はありますか？

Answer 1

pull-rightを使用して必要なものを達成するには何も問題ありません。

<h2>Stock Management</h2> 
<hr/> 
<div class='btn-group pull-right'> 
    <a href='#' class='btn btn-default'>Add New Product</a> 
    <a href='#' class='btn btn-info'>Supplier List</a> 
    <a href='#' class='btn btn-danger'>Stock Alerts</a> 
</div> 
<div class='clearfix'></div> 
<hr/> 

あなたは、そうでなければ、問題が重複している可能性があり、その後clearfixのクラスにdivをちょうど必要となります。

ドロップダウンメニューでpull-rightクラスの使用に関するブートストラップのドキュメントからのノート：V3.1.0のよう

推奨されていません.pull右アライメント

、我々は.pull右を非推奨ましたドロップダウンメニューで。メニューを右揃えにするには、.dropdown-menu-rightを使用します。ナビゲーションバーの右揃えのナビゲーションコンポーネントは、このクラスのミックスインバージョンを使用してメニューを自動的に調整します。それを上書きするには、.dropdown-menu-leftを使用します。

PS - データを表示する以外にテーブルを使用しないでください。この種のWebデザインは1998年に残されています。P

Answer 2

これがあなたの目的を解決するかどうかを確認してください。私はあなたのブートストラップクラスを変更

<table> 
    <tr> 
     <td colspan="3"> 
      <div class="btn-toolbar"> 
       <div class="btn-group"> Link 1 </div> 
        <div class="btn-group"> Link 2 </div> 
        <div class="btn-group"> Form 1 </div>  
      </div>