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