わかりましたので、私は並んでモーダル上のボタンを設定しようとしています。 1つはダウンロードリンクで、もう1つはミラーです。私はディスプレイのCSSを使用して独自のクラスを作成しようとしました:インラインブロック。しかし、それはうまくいきませんでした。並べて表示するにはどうすればよいですか?
私のモーダル用の私のコード:
<!-- Texturepack Popup Start -->
<div class = "modal fade" id = "texturepack" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4>Texture Pack Download</h4>
</div>
<div class = "modal-body">
<center><h3>Download our Custom Texture Pack!</h3></center>
<p class = "tpbutton btn-toolbar">
<a style = "margin: 0 200px; display: inline-block" class = "btn navbar-btn btn-primary pull-center" href = "#" target = "_texturepack">Download</a>
<a style = "margin: 0 300px; display: inline-block" class = "btn navbar-btn btn-default pull-center" href = "#" target = "_texturepack">Mirror</a>
</p>
<!-- Carousel Text Start -->
<div style = "height:15px"></div>
<div style = "border: 2px solid black; width: 500px; margin: 0 auto" id = "textureCarousel" class = "carousel slide">
<ol class = "carousel-indicators" data-ride = "carousel">
<li data-target = "#textureCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#textureCarousel" data-slide-to = "1"></li>
<li data-target = "#textureCarousel" data-slide-to = "2"></li>
</ol>
<div class = "carousel-inner">
<div class = "item active">
<img src = "img/a.png" alt = "Beach" class = "img-responsive">
</div>
<div class = "item">
<img src = "img/b.png" alt = "Beach" class = "img-responsive">
</div>
<div class = "item">
<img src = "img/c.png" alt = "Beach" class = "img-responsive">
</div>
</div>
</div>
<!-- Carousel End -->
</div>
<div class = "modal-footer">
<a class = "btn btn-danger" data-dismiss = "modal">Close</a>
</div>
</div>
</div>
</div>
<!-- Texturepack Popup End -->
ボタングループを使用します。
<div class="btn-group">
<a href="#" class="btn btn-primary">Download</a>
<a href="#" class="btn btn-default">Mirror</a>
</div>
このパッティングtext-align:center
外側の要素:
<p class = "tpbutton btn-toolbar" style="text-align:center">
<a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a>
<a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a>
</p>
EDIT:または text-center
クラス:
<p class = "tpbutton btn-toolbar text-center">
<a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a>
<a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a>
</p>
私の場合、20分間ぶら下がっていました。
最後に
<td class="text-nowrap">
働いた。
なぜpull-left
pull-right
bootstrap3のような
<button class = "btn-primary pull-left">Download</button>
<button class = "btn-danger pull-right">Mirror</button>
テキストセンターまたはbtnグループのどちらのソリューションも機能しませんでした。私は2つのボタンを一列に並べてしまいましたが、うまくいきました。
<div class="row">
<%= button_to "Delete", "#", :class=>"btn" %>
<%= f.button :submit %>
</div>
With bootstrap 4
<div class="float-right">
<button>Cancel</button>
</button>Save</button>
</div>
btn-group
は機能し、2つのボタンの間のスペースを削除します。
たとえば、次のコード:
<div class="btn-group">
<button class="btn btn-primary">Transaction History</button>
<button class="btn btn-primary">Make New Payment
</button>
</div>
あなたにこれを与えます:
ボタン間にスペースが必要な場合は、btn-toolbar
代わりに:
<div class="btn-toolbar" style="padding-left: 15px">
<button class="btn btn-primary">Transaction History</button>
<button class="btn btn-primary">Make New Payment
</button>
</div>
スタイリングを追加しました。スタイリングがなければ、ボタンは左に揃えられます。必要に応じてパディング値を変更します。