2016-09-16 3 views
0

Я пытаюсь развернуть форму в панели и иметь много проблем с форматированием.Форма макета в панели с использованием 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> 

ответ

1

Вы используете float:right на кнопке сохранения.

Float элемент из нормального потока, так что высота его контейнера не учитывает плавучего элемента

скриншот: https://i.imgur.com/xdvP23p.png

Добавить свойство clearfix в плавающий контейнер элемента будет решить этот вопрос

скриншот: https://i.imgur.com/HiNC61Q.png

Bootstrap уже содержит .clearfix класс для добавления clearfix css properties

What is clearfix ?

Смежные вопросы