我正在尝试使用 bootstrap 获取垂直选项卡菜单。我想获得选项卡的背景,以便它与右侧的选项卡内容区分开来。当我尝试使用导航背景颜色时,选项卡看起来与导航背景颜色不一致
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="TABBEDLOCATEPANEL" ng-show="locate.toggleCheck()" class="container">
<div id=locatePanel class="row">
<div class="col-md-4 col-sm-3">
<div class="tabs-left">
<ul id=locateTabs class="nav form-tabs nav-pills nav-stacked">
<li class="active" title="Locate By Address"><a data-toggle="pill" href="#locateTab1" target='_self'><img src="images/Address.png" height="30" width="30"></img></a></li>
<li title="Locate By Existing Record"><a data-toggle="pill" href="#locateTab2" target='_self'><img src="images/entity.png" height="30" width="30"></img></a></li>
<li title="Locate By Coordinate"><a data-toggle="pill" href="#locateTab3" target='_self'><img src="images/coordinator.png" height="30" width="30"></img></a></li>
<li title="Geography" ng-show="locate.getJSON().geographyTab" ng-click="locate.showGeographyData();"><a data-toggle="pill" href="#locateTab4" target='_self'><img src="images/geography.png" height="30" width="30"></img></a></li>
<li title="Results" id="ltab5" ng-show="locate.resultsTab"><a data-toggle="pill" href="#locateTab5" target='_self'><img src="images/Result.png" height="30" width="30"></img></a></li>
</ul>
<div class="tab-content">
<div id="locateTab1" class="tab-pane active">
<table id=locateAddress style="border-collapse: separate; border-spacing: 5px;">
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_address ng-model="locate.locatebyaddress_address" required placeholder="Address" init-from-form>
<label class="floating-label">Address:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_city ng-model="locate.locatebyaddress_city" required placeholder="City" init-from-form>
<label class="floating-label">City:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_state ng-model="locate.locatebyaddress_state" required placeholder="State" init-from-form>
<label class="floating-label">State:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_zip ng-model="locate.locatebyaddress_zip" required placeholder="Zip" init-from-form>
<label class="floating-label">Zip:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_longitude disabled=disabled ng-model="locate.locatebyaddress_longitude" required placeholder="Longitude" init-from-form>
<label class="floating-label">Longitude:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_latitude disabled=disabled ng-model="locate.locatebyaddress_latitude" required placeholder="Latitude" init-from-form>
<label class="floating-label">Latitude:</label>
<div class="field-underline"></div>
</div>
</table>
<br>
<input type=submit value=Find id=locateByAddress ng-click="locate.locateByAddress();"></input>
<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
<input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>
</div>
<div id="locateTab2" class="tab-pane">
<table id=locateRecord style="border-collapse: separate; border-spacing: 5px;">
<tr>
<td>Entity Type</td>
<td>
<select id=locateEntityType ng-change="locate.entityChanged();" ng-model="locate.entityType">
<option></option>
<option ng-repeat="(key, value) in locate.getJSON().dropdown" value="{{key}}">{{ value }}</option>
</select>
</td>
</tr>
<tr><td>Record Number</td><td><input id=recordNumberExistingRecord ng-model="locate.recordNumber" type=text name=recordNumber></td></tr>
</table>
<br>
<input type=submit value=Find id=locateByExistingRecord ng-click="locate.getLocationByEntity();"></input>
<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
<input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>
</div>
<div id="locateTab3" class="tab-pane">
<table id=locateCoordinates style="border-collapse: separate; border-spacing: 5px;">
<tr><td>Longitude</td><td><input type=text ng-model=locate.locateByCoordinatelongitude></td></tr>
<tr><td>Latitude</td><td><input type=text ng-model=locate.locateByCoordinatelatitude></td></tr>
<tr><td></td><td><input type=button ng-click="locate.pickCoordinate();" id=coordinatePick name=locatePick value=PICK></td></tr>
</table>
<br>
<input type=submit value=Find id=locateByCoordinate ng-click="locate.locateByCoordinate();"></input>
<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
<input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>
<input type=button ng-click="locate.streetView();" ng-show="locate.streetViewCheck" value="Street View" id=streetView></input>
</div>
<div id="locateTab4" class="tab-pane" ng-show="locate.getJSON().geographyTab">
<div ng-html-compile="locate.getGeographyHTML()" | trust></div>
</div>
<div id="locateTab5" class="tab-pane" ng-show="locate.resultsTab">
<ul class="listAddress">
<li ng-repeat="list in locate.addressList" ng-click="locate.addressListClick($index);">
{{ list.formatted_address }}
</li>
</ul>
</div> <!-- /result tab -->
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
当我希望文本框位于这些选项卡的一侧,但由于某种原因它们继续位于选项卡下方时。我该如何解决这个问题。
最佳答案
遵循自举网格结构。
更多详情可以引用http://getbootstrap.com/css/#grid
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="TABBEDLOCATEPANEL" ng-show="locate.toggleCheck()" class="container">
<div id=locatePanel class="row">
<div class="col-md-4 col-sm-3 col-xs-3">
<div class="tabs-left">
<ul id=locateTabs class="nav form-tabs nav-pills nav-stacked">
<li class="active" title="Locate By Address">
<a data-toggle="pill" href="#locateTab1" target='_self'><img src="images/Address.png" height="30" width="30"></a>
</li>
<li title="Locate By Existing Record">
<a data-toggle="pill" href="#locateTab2" target='_self'><img src="images/entity.png" height="30" width="30"></a>
</li>
<li title="Locate By Coordinate">
<a data-toggle="pill" href="#locateTab3" target='_self'><img src="images/coordinator.png" height="30" width="30"></a>
</li>
<li title="Geography" ng-show="locate.getJSON().geographyTab" ng-click="locate.showGeographyData();">
<a data-toggle="pill" href="#locateTab4" target='_self'><img src="images/geography.png" height="30" width="30"></a>
</li>
<li title="Results" id="ltab5" ng-show="locate.resultsTab">
<a data-toggle="pill" href="#locateTab5" target='_self'><img src="images/Result.png" height="30" width="30"></a>
</li>
</ul>
</div>
</div>
<div class="col-md-8 col-sm-9 col-xs-9">
<div class="tab-content">
<div id="locateTab1" class="tab-pane active">
<table id=locateAddress style="border-collapse: separate; border-spacing: 5px;">
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_address ng-model="locate.locatebyaddress_address" required placeholder="Address" init-from-form>
<label class="floating-label">Address:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_city ng-model="locate.locatebyaddress_city" required placeholder="City" init-from-form>
<label class="floating-label">City:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_state ng-model="locate.locatebyaddress_state" required placeholder="State" init-from-form>
<label class="floating-label">State:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_zip ng-model="locate.locatebyaddress_zip" required placeholder="Zip" init-from-form>
<label class="floating-label">Zip:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_longitude disabled=disabled ng-model="locate.locatebyaddress_longitude" required placeholder="Longitude" init-from-form>
<label class="floating-label">Longitude:</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type='text' class="field" name=locatebyaddress_latitude disabled=disabled ng-model="locate.locatebyaddress_latitude" required placeholder="Latitude" init-from-form>
<label class="floating-label">Latitude:</label>
<div class="field-underline"></div>
</div>
</table>
<br>
<input type=submit value=Find id=locateByAddress ng-click="locate.locateByAddress();">
<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation>
<input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate>
</div>
<div id="locateTab2" class="tab-pane">
<table id=locateRecord style="border-collapse: separate; border-spacing: 5px;">
<tr>
<td>Entity Type</td>
<td>
<select id=locateEntityType ng-change="locate.entityChanged();" ng-model="locate.entityType">
<option></option>
<option ng-repeat="(key, value) in locate.getJSON().dropdown" value="{{key}}">{{ value }}</option>
</select>
</td>
</tr>
<tr>
<td>Record Number</td>
<td>
<input id=recordNumberExistingRecord ng-model="locate.recordNumber" type=text name=recordNumber>
</td>
</tr>
</table>
<br>
<input type=submit value=Find id=locateByExistingRecord ng-click="locate.getLocationByEntity();">
<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation>
<input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate>
</div>
<div id="locateTab3" class="tab-pane">
<table id=locateCoordinates style="border-collapse: separate; border-spacing: 5px;">
<tr>
<td>Longitude</td>
<td>
<input type=text ng-model=locate.locateByCoordinatelongitude>
</td>
</tr>
<tr>
<td>Latitude</td>
<td>
<input type=text ng-model=locate.locateByCoordinatelatitude>
</td>
</tr>
<tr>
<td></td>
<td>
<input type=button ng-click="locate.pickCoordinate();" id=coordinatePick name=locatePick value=PICK>
</td>
</tr>
</table>
<br>
<input type=submit value=Find id=locateByCoordinate ng-click="locate.locateByCoordinate();">
<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation>
<input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate>
<input type=button ng-click="locate.streetView();" ng-show="locate.streetViewCheck" value="Street View" id=streetView>
</div>
<div id="locateTab4" class="tab-pane" ng-show="locate.getJSON().geographyTab">
<div ng-html-compile="locate.getGeographyHTML()" | trust></div>
</div>
<div id="locateTab5" class="tab-pane" ng-show="locate.resultsTab">
<ul class="listAddress">
<li ng-repeat="list in locate.addressList" ng-click="locate.addressListClick($index);">
{{ list.formatted_address }}
</li>
</ul>
</div>
<!-- /result tab -->
</div>
<!-- /tab-content -->
</div>
<!-- /tabbable -->
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
<!-- /container -->
关于html - 使用 Bootstrap 时垂直选项卡的布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40095994/