Bootstrap-3 панель нижнего колонтитула не заполняет панель

Question

Я работаю над одностраничным приложением для веб-администратора, я использую Bootstrap 3 и AngularJS 1.4.8. Я создал панель, и я разместил ее внутри этой панели. нижний колонтитул внутри формы с двумя кнопками.

Моя проблема заключается в том, что нижний колонтитул панели не закрывает/не заполняет длину панели.

Нужно ли установить нижний колонтитул внутри form, чтобы кнопка могла отправить информацию, или если я установил нижний колонтитул за пределы form, кнопка может отправить информацию в любом случае?

Я думаю, что проблема в том, что я создал <div class="col-lg-12"> поставить панель заголовка и внутри этой div я создал еще один <div class="col-lg-6"> положить содержимое панели так, поэтому панель сноска не покрывает всю панель.

Я попытался положить нижний колонтитул за пределы <div class="col-lg-6">, и это сработало, но если это произойдет, кнопка будет за пределами form. Мне кажется, мне кажется, что плохая практика ставит кнопку за пределы form.

Вот мой HTML код

<div class="row"> 
    <div class="col-lg-12"> 
     <h1 class="page-header">Create User</h1> 
    </div> 
    <!-- /.col-lg-12 --> 
</div> 
<!-- /.row --> 
<div class="row"> 
    <div class="col-lg-12"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
       Basic Form Elements 
      </div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-lg-6"> 
         <form role="form"> 
          <div class="form-group"> 
           <label>Name:</label> 
           <input class="form-control" placeholder="user name"> 
          </div> 
          <div class="form-group"> 
           <label>Email:</label> 
           <input class="form-control" placeholder="email"> 
          </div> 
          <div class="panel-footer clearfix"> 
           <div class="pull-right"> 
            <button type="reset" class="btn btn-default">Reset</button> 
            <button type="submit" class="btn btn-primary">Send</button> 
           </div> 
          </div> 
         </form> 
        </div> 
        <!-- /.col-lg-6 (nested) --> 
        <!-- /.col-lg-6 (nested) --> 
       </div> 
       <!-- /.row (nested) --> 
      </div> 
      <!-- /.panel-body --> 
     </div> 
     <!-- /.panel --> 
    </div> 
    <!-- /.col-lg-12 --> 
</div> 
<!-- /.row --> 

Answer 1

Причина ваша панель-сноска не выровнена в нижней части панели, потому что у вас есть внутри панели тел. Ваш заголовок панели, панель-панель и панель-нижний колонтитул должны быть отдельными компонентами внутри самой панели.

Просто попробуйте снять нижний колонтитул изнутри панели.

Это будет означать, что кнопки будут вне формы, но вы не сможете переносить контент формы по нескольким div. Если вы хотите избежать удаления кнопок из формы, вам, возможно, придется оставить их в теле и, возможно, создать их аналогично тому, как будет выглядеть панель нижнего колонтитула.

Answer 2

Вам необходимо переместить panel-footer div за пределами поля panel-body.

Этот дед должен начинаться послеpanel-body div был закрыт. Вам нужно будет перестроить форму, чтобы кнопка отправки все еще была внутри, или вам нужно будет использовать javascript/jQuery, чтобы отправить ее, если вы не хотите этого делать.

Вы можете увидеть примеры использования различных компонентов панели в загрузочном блоке components для панелей.

Исправлено: bootply