0
ボタンを脇に揃える方法を見つけようとしています。 私は脇にcol-md-3を持っていて、それからメインコンテンツcol-md-8は固定サイズのキャンバスを持っています。脇の主なコンテンツの高さに従います。しかし、脇の最後のボタン(私はそれが一番下のものであることを常に望んでいます)は動作しません。 キャンバスが高さを決定しているため、調整する必要がありますか?ボタンにクラスposition-absolute
とfixed-bottom
を追加ブートストラップ4フォームのボタンの端を整列する
<aside class="col-md-3 bg-light">
<a href="https://placeholder.com" class="d-flex justify-content-center"><img src="http://via.placeholder.com/100x100"></a>
<div class="">
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
</div>
<div class="align-items-end">
<div class="mb-3">
<button type="button" class="btn btn-secondary btn-lg btn-block">Add to cart</button>
</div>
</div>
</aside>
<!-- Canvas -->
<div class="col-md-9 bg-secondary d-flex justify-content-center">
<canvas style="width: 590.6px; height: 826.8px; outline: none; background-color: #fff;" class="mt-5 mb-5"></canvas>
</div>