公交查询

<div class="row" id="query">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="query" style="margin-top: 5em;" >
                <div class="col-md-3" id="layout-left" style="margin-left: 0;padding: 0">
                    <div id="navigation" style="height: 125px;border-style: solid;border- 1px;border-color: #00a2d4">
                        <ul id="bus" class="nav nav-pills nav-stacked">
                            <li class="active">
                                <a href="#query-line" data-toggle="tab"><h4 style="text-align: center">线路查询</h4></a>
                            </li>
                            <li>
                                <a href="#query-station" data-toggle="tab"><h4 style="text-align: center">站点查询</h4></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-8" id="layout-right" style="border-style: solid;border- 1px;border-color: #00a2d4;height: 125px;">
                    <div class="row" id="switchCity">
                        <!-- 按钮 -->
                        <button  class="btn btn-success" data-toggle="modal" data-target="#exampleModal" style="float: left" value="{$city.id}" id="cityId">
                            {$city.name} [切换城市]
                        </button>
                        <!-- 模态框 -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <h5 class="modal-title" id="exampleModalLabel">选择城市</h5>
                                    </div>
                                    <div class="modal-body">
                                        <form action="index/index" class="form-inline">
                                            <div class="form-group">
                                                <select class="form-control m-b-xs" id="provinces">
                                                    <option selected="selected">请选择<span class="caret"></span></option>
                                                    {foreach $provinces as $key=>$pr}
                                                    <option value="{$pr.id}">{$pr.name}</option>
                                                    {/foreach}
                                                </select>
                                                <select class="form-control m-b-xs" id="city">
                                                    <option value="">请选择<span class="caret"></span></option>
                                                </select>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary" id="chose">确定</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 1em">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                            <div id="busContent" class="tab-content" >
                                <!-- 线路查询 -->
                                <div id="query-line" class="tab-pane fade in active">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="lineId" placeholder="输入线路名称，如“25”">
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary" type="submit" id="lineSearch">
                                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                <!-- 站点查询 -->
                                <div id="query-station" class="tab-pane fade">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="stationName" placeholder="输入站点名，如“火车站”">
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary" type="button" id="stationSearch">
                                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

效果图