Я пытаюсь развернуть форму в панели и иметь много проблем с форматированием.Форма макета в панели с использованием Bootstrap
Я, похоже, не могу установить разрыв строки между кнопкой «Сохранить» и меткой «E-mail». Я попытался переместить его, используя теги <p>
. Я пробовал использовать form-inline и form-horizontal, но только ухудшал ситуацию.
В качестве альтернативы, я хотел бы поместить кнопку «Сохранить» непосредственно рядом с текстовым полем, но опять-таки не может этого достичь.
jsfiddle для примера https://jsfiddle.net/omyuzuu3/.
<div class="col-sm-4" id="leftCol">
<div class="panel panel-default">
<div class="panel-body">
<strong>Account Details</strong><p>
<hr>
<form class="form" method="post" >
<div class="form-group">
<label for="exampleInputName2">Username</label><p>
<input name="txtUsername" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->username; ?>">
</div>
<div class="form-group">
<button type="submit" name="btnSaveUsername" class="btn btn-primary btn-sm pull-right">Save</button>
<p>
</div>
<div class="form-group">
<p>
<label for="exampleInputName2">E-mail</label><p>
<input name="txtEmail" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->email; ?>">
</div>
<div class="form-group">
<button type="submit" name="btnSaveEmail" class="btn btn-primary btn-sm pull-right">Save</button>
</div>
</form>
</div>
</div>
</div>