我有一个使用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
谢谢 .
3 回答
而不是使用自定义CSS进行对齐和间距,read the docs并使用Bootstrap .
演示:https://www.codeply.com/go/nJ0HHdEB1V
使用此方法,您需要所有额外的CSS .
您可以尝试使用bootstrap的flexbox实用程序:)
另外,这是一个working example :)
请将您的按钮放在
form-group
div的外侧