使用引导程序时垂直选项卡的布局问题

I am trying to get a vertical tab menu using bootstrap. I would like to get a background for the tabs so that it would differentiate from the tab content on the right. When I try to use the background color for nav the tabs look inconsistent with the nav background color

我正在尝试使用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>&nbsp;&nbsp;&nbsp;
				<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>&nbsp;&nbsp;&nbsp;
				<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>&nbsp;&nbsp;&nbsp;
				<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
				&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;
				<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
				&nbsp;&nbsp;&nbsp;<input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>&nbsp;&nbsp;&nbsp;
				<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 -->

When I want the text box to be on the side of these tabs but they for some reason keep on going below the tabs. How could I fix this.

当我希望文本框位于这些选项卡的一侧时，但由于某些原因它们继续在选项卡下方。我怎么能解决这个问题。

3 个解决方案

#1

Follow bootstrap grid structure.

遵循bootstrap网格结构。

For more details you can refer http://getbootstrap.com/css/#grid

有关更多详细信息，请参阅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();">&nbsp;&nbsp;&nbsp;
                <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation>&nbsp;&nbsp;&nbsp;
                <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();">&nbsp;&nbsp;&nbsp;
                <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation> &nbsp;&nbsp;&nbsp;
                <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();">&nbsp;&nbsp;&nbsp;
                <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation> &nbsp;&nbsp;&nbsp;
                <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate>&nbsp;&nbsp;&nbsp;
                <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 -->

#2

Maybe you could solve that by using the bootstrap grid system.

也许你可以通过使用bootstrap网格系统来解决这个问题。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-3">
                    <a data-toggle="pill" href="#locateTab1" target='_self'><img src="images/Address.png" height="30" width="30"></img>
                    </a>
                </div>
                <div class="col-xs-3">
                    Address
                </div>
                <div class="col-xs-6">
                    <input type=text name=locatebyaddress_address ng-model="locate.locatebyaddress_address">
                </div>
            </div>
      <br>
            <div class="row">
                <div class="col-xs-3">
                    <a data-toggle="pill" href="#locateTab1" target='_self'><img src="images/Address.png" height="30" width="30"></img>
                    </a>
                </div>
                <div class="col-xs-3">
                    Address
                </div>
                <div class="col-xs-6">
                    <input type=text name=locatebyaddress_address ng-model="locate.locatebyaddress_address">
                </div>

http://codepen.io/anon/pen/dpgNgp

#3

TRY THIS. I put a inline style into ul tab <ul id=locateTabs class="nav form-tabs nav-pills nav-stacked" style="float: left;">

尝试这个。我将内联样式放入ul选项卡

<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" style="float: left;">
	    	<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>&nbsp;&nbsp;&nbsp;
				<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>&nbsp;&nbsp;&nbsp;
				<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>&nbsp;&nbsp;&nbsp;
				<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
				&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;
				<input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
				&nbsp;&nbsp;&nbsp;<input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>&nbsp;&nbsp;&nbsp;
				<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 -->