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

时间：2017-12-31 13:36:31

标签： html css twitter-bootstrap

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

以下是我到目前为止所得到的内容。你会注意到两件事：

  1. 可点击区域只是标题顶部的一条窄条。
  2. 当窗口很宽时，标题看起来像一团糟（展开下面的代码段，或在宽屏幕中看到这个fiddle。）

    3. 我该如何解决这些问题？

    .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（和答案）使用按钮来折叠面板，这不是我想要的。

2 个答案:

答案 0 :(得分：0)

您只需要改进CSS代码：

.panel-title{
    height: 100%;
    position: relative;
}
.panel-title > a{
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    z-index: 2;
}

完整摘录：

＆＃13;
＆＃13; 
.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{
    height: 100%;
    position: relative;
}

.panel-title > a {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    z-index: 2;
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

随意编辑以最适合您的需要。

答案 1 :(得分：0)

＆＃13;
＆＃13; 
.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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题