Юстировка внутренней панели в загрузчике

Question

Folks,

Я новичок в самонастройках и не смог выровнять внутреннюю панель с внешней панелью.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="panel panel-default bs-example"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title">Outer</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <form name="templateForm" class="form-horizontal bs-example" style="min-height: 320px;"> 
 

 
     <div class="form-group"> 
 
     <div class="col-sm-4"> 
 
      <label for="inputName" class="control-label">Name</label> 
 
      <input type="text" class="form-control" name="name" id="inputName" placeholder="Display Name"> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <div class="col-sm-4"> 
 
      <button class="btn btn-primary">Submit</button> 
 
     </div> 
 
     </div> 
 
     <div class="panel panel-default" style="padding:0px;"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">Description</h3> 
 
     </div> 
 
     <div class="panel-body"></div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

1) Я хочу внутреннюю панель (Description), чтобы начать от границы внешней панели. (Прикрепленное наложение темной линии должно быть удалено на изображении)

2) Я хочу какой-то вариант, когда пользователь может свернуть/свернуть внешнюю панель, и по умолчанию должно быть видно только название панели.

Answer 1

Меняем padding:15px к padding:15px 0 в .panel-body (удалить левый отступы) и добавить padding-left к .form-group

Здесь:

.panel-body { 
    padding:15px 0; 
} 

.form-group { 
    padding-left:15px; 
} 

Bootply: http://www.bootply.com/UV5wsddAoW

Answer 2

Если вы действительно хотите этого вы можете добавить класс к внутренней панели, например inner-panel, и добавьте к нему отрицательный запас. По умолчанию Bootstrap использует 15px отступов на panel-body, поэтому вам необходимо компенсировать это.

.inner-panel { 
    margin-left: -15px; 
    margin-right: -15px; 
} 

Для разрушения внутренней панели, которую необходимо использовать компоненты JavaScript Bootstrap в частности, http://getbootstrap.com/javascript/#collapse.

<div class="panel-heading" data-toggle="collapse" href="#inner-panel-body"> 

Я добавил data-toggle="collapse" и href="#inner-panel-body" к panel-heading внутренней панели. Это говорит Bootstrap, что щелчок на заголовке должен расширить элемент, выбранный селектором css #inner-panel-body. Я также добавил некоторые css, чтобы всегда показывать значок при наведении заголовка. Другим вариантом было бы использовать тег <a> вокруг описания заголовка.

<div class="panel-body collapse" id="inner-panel-body"></div> 

panel-body получает класс collapse делает панель быть свернуты по умолчанию и идентификатор inner-panel-body, который будет использоваться href на panel-heading

Это также может быть идея, чтобы увидеть, если вы можете использовать больше классов сетки Bootstrap для добавления столбцов контейнера, строки и реагирования вокруг вашего содержимого. См http://getbootstrap.com/css/#grid

.inner-panel { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
} 
 

 
.inner-panel .panel-heading { 
 
    cursor: pointer; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 
<div class="panel panel-default bs-example"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title">Outer</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <form name="templateForm" class="form-horizontal bs-example" style="min-height: 320px;"> 
 

 
     <div class="form-group"> 
 
     <div class="col-sm-4"> 
 
      <label for="inputName" class="control-label">Name</label> 
 
      <input type="text" class="form-control" name="name" id="inputName" placeholder="Display Name"> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <div class="col-sm-4"> 
 
      <button class="btn btn-primary">Submit</button> 
 
     </div> 
 
     </div> 
 
     <div class="inner-panel panel panel-default"> 
 
     <div class="panel-heading" data-toggle="collapse" href="#inner-panel-body"> 
 
      <h3 class="panel-title"> 
 
      Description 
 
      </h3> 
 
     </div> 
 
     <div class="panel-body collapse" id="inner-panel-body"></div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>