ブートストラップでボタンの位置を設定する方法

ブートストラップでは、右にプル、左にプル、テキスト右、テキスト中央、テキスト左を使用してボタンの位置を設定できます。

例:

次は、各 li のボタンを右に揃える必要がある簡単な例です:

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
 </ul>

方法 1:

Bootstrap 3 では、次のように、右にプル スタイル クラスを使用して要素を右揃えにできます。

<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css-->
<ul>
  <li>One <button class="btn btn-primary pull-right">test</button></li>
  <li>Two <button class="btn btn-danger  pull-right">test2</button></li>
 </ul>

次のように、各 li の高さを適切に調整します。

li{line-height:40px; height:40px;}

方法 2:

ブートストラップ 3 では、次のように text-right スタイル クラスを使用してボタンを右揃えにすることもできます。

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
   </div>

方法 3:

Bootstrap 4 では、次のように、プルライト スタイル クラスの名前がフロート右クラス名に変更されました:

<div class="row">
    <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
    <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
</div>

推奨:

bootstrap 入門チュートリアル

以上がブートストラップでボタンの位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。