如何對齊此文本區域右側的按鈕

Question

我有一個使用Bootstrap 4的網站。在我的設計中，聯系表格如下所示：

但是在我的實際網站上，它看起來像這樣：

我試過使用浮點數，還嘗試創建行和列以使其正確對齊，但是沒有任何效果。

 footer input, textarea { background: #fff; border: none; -webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); -moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); border-radius: 15px; display: inline-block; } footer button.btn { display: flex; justify-self: flex-end; padding-left: 20px; padding-right: 20px; border-radius: 15px; } 

 <div class="col-md"> <form action="" method="post"> <div class="row"> <label for="name">Nombre</label> <input type="text" name="name"> <label for="email">Email</label> <input type="text" name="email"><br> <div class="form-group row"> <label for="message">Asunto</label> <textarea name="message" id="" cols="30" rows="10"></textarea> <button type="submit" class="btn btn-info">Enviar</button> </div> </div> </form> </div> 

我所有的代碼： https ： //codepen.io/Wibblefish/pen/ZVEdqz

謝謝。

Answer 1

請把您的按鈕放在form-group div的外面

  footer input, textarea { background: #fff; border: none; -webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); -moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); border-radius: 15px; display: inline-block; } footer button.btn { display: flex; justify-self: flex-end; padding-left: 20px; padding-right: 20px; border-radius: 15px; } 

 <div class="col-md"> <form action="" method="post"> <div class="row"> <label for="name">Nombre</label> <input type="text" name="name"> <label for="email">Email</label> <input type="text" name="email"><br> <div class="form-group row"> <label for="message">Asunto</label> <textarea name="message" id="" cols="30" rows="10"></textarea> </div> <button type="submit" class="btn btn-info">Enviar</button> </div> </form> </div> 

Answer 2

閱讀文檔並使用Bootstrap而不是使用自定義CSS進行對齊和間距。

<form action="" method="post">
    <div class="form-row mb-2">
        <label for="name" class="col-md-3 text-right">Nombre</label>
        <input type="text" name="name" class="col-md-7 form-control">
     </div>
    <div class="form-row mb-2">
        <label for="email" class="col-md-3 text-right">Email</label>
        <input type="text" name="email" class="col-md-7 form-control">
     </div>
    <div class="form-row mb-2">
        <label for="message" class="col-md-3 text-right">Asunto</label>
        <textarea name="message" id="" cols="30" rows="10"  class="col-md-7 form-control"></textarea>
        <button type="submit" class="btn btn-info col-md-2 align-self-end">Enviar</button>
    </div>
</form>

演示： https ： //www.codeply.com/go/nJ0HHdEB1V

使用這種方法，您需要所有額外的CSS。

Answer 3

您可以嘗試使用bootstrap的flexbox實用程序:)

 input, textarea { background: #fff; border: none; -webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); -moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16); border-radius: 15px; } footer button.btn { display: flex; padding-left: 20px; padding-right: 20px; border-radius: 15px; } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="container p-5 d-flex justify-content-center align-items-center" <form> <div class=" d-flex justify-content-center align-items-center flex-column"> <div class="form-group align-self-start"> <label for="name" class="mx-1">Nombre</label> <input type="text" name="name"> </div> <div class="form-group align-self-start"> <label for="email" class="mx-3">Email</label> <input type="text" name="email"> </div> <div class="form-group d-flex justify-content-center"> <label for="message" class="mx-2">Asunto</label> <textarea name="message" class="mx-2" id="" cols="30" rows="10"></textarea> <button type="submit" class="btn btn-info align-self-end mx-2">Enviar</button> </div> </div> </form> </div> 

另外，這是一個工作示例 ：)