html - 带有输入组的可折叠 Bootstrap 面板，使整个标题可点击

Question

我正在尝试将 input-group 添加到可折叠面板标题中。 面板主体使用 a 元素折叠，我希望整个面板标题都可以点击，input-group 除外。

以下是我到目前为止所得到的。您会注意到两件事:

1. 可点击区域只是标题顶部的一条窄带。
2. 当窗口变宽时，标题看起来一团糟(展开下面的代码片段，或在宽屏幕中查看此 fiddle)。

我该如何解决这些问题？

.container {
    width: 100%;
    padding: 5px;
}

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title > a {
    display: block;
    padding: 5px;
    text-decoration: none;
}

.more-less {
    float: left;
    color: #212121;
    padding-left: 5px;
    padding-top: 10px;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

.input-group {
  padding-left: 20px;
  padding-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
         <div class="panel-heading" role="tab" id="headingOne">
            <div class="panel-title">
                <a role="button" data-toggle="collapse" href="#collapseOne">
                  <i class="more-less glyphicon glyphicon-plus"></i>
                </a>
                <div class="col-lg-2">
                    <div class="input-group">
                        <select class="form-control" id="exampleFormControlSelect1">
                           <option value="1">option 1</option>
                           <option value="2">option 2</option>
                           <option value="3">option 3</option>
                        </select>
                        <span class="input-group-btn">
                           <button class="btn btn-secondary" type="button">Add</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
               My Panel Body
            </div>
        </div>
      </div>
    </div>
</div>

备注:This是一个相关的问题，但 OP(和答案)使用按钮折叠面板，这不是我想要的。

Answer 1

.container {
    width: 100%;
    padding: 5px;
}

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title > a {

    padding: 5px;
    text-decoration: none;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

.input-group {
  padding-bottom: 10px;
}

.btn-group{ padding-top: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
         <div class="panel-heading" role="tab" id="headingOne">
            <div class="panel-title">
              <div class="row">
                <div class="col-lg-12 btn-group">
                    <a role="button" data-toggle="collapse" href="#collapseOne" class="btn ">
                      <i class="more-less glyphicon glyphicon-plus"></i>
                    </a>
                      <div class="input-group">
                          <select class="form-control" id="exampleFormControlSelect1">
                             <option value="1">option 1</option>
                             <option value="2">option 2</option>
                             <option value="3">option 3</option>
                          </select>
                          <span class="input-group-btn">
                             <button class="btn btn-secondary" type="button" style="margin-right: 10px">Add</button>
                          </span>
                      </div>
                  </div>
              </div>    
            </div>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
               My Panel Body
            </div>
        </div>
      </div>
    </div>
</div>