2017-11-20 6 views
0

ボタンを脇に揃える方法を見つけようとしています。 私は脇にcol-md-3を持っていて、それからメインコンテンツcol-md-8は固定サイズのキャンバスを持っています。脇の主なコンテンツの高さに従います。しかし、脇の最後のボタン(私はそれが一番下のものであることを常に望んでいます)は動作しません。 キャンバスが高さを決定しているため、調整する必要がありますか?ボタンにクラスposition-absolutefixed-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> 

答えて

0

はそれを行う必要があります。

ブートストラップでspacing utilitesを使用してマージンを調整できます。

関連する問題