同じ行のボタンのマージンを反応的に設定するにはどうすればよいですか？

Question

私は現在水平になっているが、ボタン同士を押し離す余白を追加するために、いくつかのボタンをライン上に持っています。

私は小さなウィンドウでコードを編集していましたが、CSSマージンを使用してボタンを細かく配置していましたが、ウィンドウを最大化するとボタン間のマージンが新しいラインにプッシュボタンを押すか、

同じ行のこれらのボタンの余白を反応的な方法で設定する方法を見つけることができなかったため、新しい行にプッシュしたり元に戻したりしませんでした。

アイデア？

HTML

<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button> 
     <a href="/select-all" class="btn btn-default btn-selectspacer">Select All</a> 
     <a href="/deselect-all" class="btn btn-default">Deselect All</a> 
     <a class="btn btn-info btn-infospacer" role="button" data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button> 

CSS

.btn-selectspacer { 
    margin-left: 40em; 
} 

.btn-infospacer { 
    margin-left: 2.25em; 
} 

.btn-submitpadding { 
    padding-top: 7px; 
    padding-bottom: 7px; 
} 

画像 ​​

は、 アレックスをありがとう

Answer 1

これは、ブートストラップに付属のグリッドシステムを使用して行うことができます。たとえば、Submitは9 colをとり、select/allは2をとり、さらにinfoは1を取ります。そして、送信ボタンを列の左側に合わせます。

Answer 2

これは、必要なものに対して非常に簡単なソリューションです。私は自分自身を試して、結果はちょうどあなたが添付画像に欲しいのと同じです。 非常に大きなデバイスでテストしているかのように、特大のデバイス用に以下のブートストラップCSSをダウンロードすることをお勧めします。 BOOTSTRAP CSS FOR EXTRA LARGE DEVICES このcssをブートストラップのCSSファイルの下に置くと、 "col-xl-columns of columns"のような別の列クラスを使用できます。あなたの特定の場合、私はボタンのdivに "col-xs-12"を追加しています。 注：Upcomming Bootstrap 4には、特大のデバイス用のクラスが組み込まれています。 あなただけ

.btns-right { 
    float:right; 
    margin-right:5%; 
    } 

    .btn-submitpadding { 
    padding-top: 7px; 
    padding-bottom: 7px; 
    } 

する必要がありますし、あなたのHTMLが

<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> 
<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button> 

    <div class="btns-right"> 
     <a href="/select-all" class="btn btn-default btn-selectspacer">Select All</a> 
     <a href="/deselect-all" class="btn btn-default btn-selectspacer2">Deselect All</a> 
     <a class="btn btn-info btn-infospacer" role="button"  data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button> 
     </div> 
    </div>