带有输入组的可折叠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;