如何通過引導程序4將按鈕和複選框移動到右側？

我用Bootstrap 4做了這個，我想將按鈕和複選框移動到正確的位置，但我真的不知道該怎麼做，有人可以幫我嗎？如何通過引導程序4將按鈕和複選框移動到右側？

HTML代碼：

<div class="col-8"> 
<div class="form-group" style="text-align:right"> 
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Lascia anche tu una dedica sul profilo di @xdekus"> 
    </textarea> 
    <div class="form-row align-items-center" style="margin-top:1%;text-align:right"> 
     <div class="col-auto"> 
      <button type="submit" class="btn" style="background-color: #5EBD63; color:white; cursor:pointer; margin-top:1%;">Invia</button> 
     </div> 
     <div class="col-auto"> 
      <label class="custom-control custom-checkbox" style="margin-bottom: 0px;"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
       <span class="custom-control-description">Lascia la dedica in forma anonima.</span> 
      </label> 
     </div> 
    </div> 
</div>

來源

2017-08-14 Dekus

如果你向我提供的jsfiddle，我可以給它一個外觀和幫助你。 –

https://jsfiddle.net/6p25fL1f/ – Dekus

@Dekus你想讓文字也在右邊嗎？ – Ofisora

試試下面的代碼

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<div class="col-8"> 
 
<div class="form-group" style="text-align:right"> 
 
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Lascia anche tu una dedica sul profilo di @xdekus"></textarea> 
 
    <div class="form-row align-items-center" style="margin-top:1%;text-align:right"> 
 
     <div class="col-auto"> 
 
      <button type="submit" class="btn" style="background-color: #5EBD63; color:white; cursor:pointer; margin-top:1%;">Invia</button> 
 
     
 
      <label class="custom-control custom-checkbox" style="margin-bottom: 0px;"> 
 
       <input type="checkbox" class="custom-control-input"> 
 
       <span class="custom-control-description">Lascia la dedica in forma anonima.</span> 
 
      </label> 
 
      </div> 
 
    </div> 
 
</div> 
 

 
</div> 
 
</body> 
 
</html>

來源

2017-08-14 11:01:29

它不起作用：/有「col-auto」類的兩個div，因爲複選框和按鈕之間有對齊，沒有一個對齊不起作用 – Dekus

<div class="col-8"> 
> <div class="form-group" style="text-align:right"> 
>  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Lascia anche tu 
> una dedica sul profilo di @xdekus"> 
>  </textarea> 
>  <div class="form-row align-items-center" style="margin-top:1%;text-align:right"> 
>    <div class="col-auto"> 
>     <label class="custom-control custom-checkbox" style="margin-bottom: 0px;"> 
>      Lascia la dedica in forma anonima. -  
>      <input type="checkbox" class="custom-control-input"> 
>     </label> 
>    </div> 
>    <div class="col-auto"> 
>     <button type="submit" class="btn" style="background-color: #5EBD63; color:white; cursor:pointer; 
> margin-top:1%;">Invia</button> 
>    </div> 
>  </div> 
> </div> 
</div>

來源

2017-08-27 06:18:41

如何通過引導程序4將按鈕和複選框移動到右側？

回答

相關問題