垂直手风琴菜单标题/内容溢出问题

时间:2016-02-03 14:37:36

标签: html css menu accordion

我正在尝试在垂直菜单中创建一个表单,但内容和标题一直在搞乱。我希望相反的箭头在col-md-1内垂直左中心(靠近两个输入字段)。

JSFiddle Demo

HTML

<div class="col-lg-12" id="routeColumn">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
                    <a class="accordion-toggle">Plan a Trip</a>
                </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="list-group">
          <div class="col-md-11">
            <span class="label label-info" style="display:block; margin-top: 5px;">ORIGIN</span>
            <input type="text" class="form-control" placeholder="Origin">
            <span class="label label-info" style="display:block; margin-top: 5px;">DESTINATION</span>
            <input type="text" class="form-control" placeholder="Destination">
          </div>
          <div class="col-md-1">
            <span style="font-size:1.5em;" class="glyphicon glyphicon-sort"></span>
          </div>
          <label class="radio-inline">
            <input type="radio" name="optradio">Leave Now
          </label>
          <label class="radio-inline">
            <input type="radio" name="optradio">Leave By
          </label>
          <label class="radio-inline">
            <input type="radio" name="optradio">Arrive By
          </label>
          <div class="pull-right">
            <button type="button" class="btn btn-sm btn-danger">Get Directions</button>
          </div>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree">
                    <a class="accordion-toggle">Next Departures</a>
                </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="list-group">
          <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

0 个答案:

没有答案