7
का उपयोग करते समय लंबवत टैब के लिए लेआउट समस्याएं मैं बूटस्ट्रैप का उपयोग कर लंबवत टैब मेनू प्राप्त करने का प्रयास कर रहा हूं। मैं टैब के लिए पृष्ठभूमि प्राप्त करना चाहता हूं ताकि यह दाईं ओर टैब सामग्री से भिन्न हो। मैं एनएवी के लिए पृष्ठभूमि रंग इस्तेमाल करने की कोशिश टैब कुछ के लिए नव पृष्ठभूमि रंगबूटस्ट्रैप
<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">
\t \t <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>
\t \t <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>
\t \t <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>
\t \t <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>
\t \t <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>
\t \t </ul>
<div class="tab-content">
\t <div id="locateTab1" class="tab-pane active">
\t \t \t \t <table id=locateAddress style="border-collapse: separate; border-spacing: 5px;">
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_address ng-model="locate.locatebyaddress_address" required placeholder="Address" init-from-form>
\t \t \t \t \t <label class="floating-label">Address:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_city ng-model="locate.locatebyaddress_city" required placeholder="City" init-from-form>
\t \t \t \t \t <label class="floating-label">City:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_state ng-model="locate.locatebyaddress_state" required placeholder="State" init-from-form>
\t \t \t \t \t <label class="floating-label">State:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_zip ng-model="locate.locatebyaddress_zip" required placeholder="Zip" init-from-form>
\t \t \t \t \t <label class="floating-label">Zip:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_longitude disabled=disabled ng-model="locate.locatebyaddress_longitude" required placeholder="Longitude" init-from-form>
\t \t \t \t \t <label class="floating-label">Longitude:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t <div class="field-container">
\t <input type='text' class="field" name=locatebyaddress_latitude disabled=disabled ng-model="locate.locatebyaddress_latitude" required placeholder="Latitude" init-from-form>
\t \t \t \t \t <label class="floating-label">Latitude:</label>
\t \t \t <div class="field-underline"></div>
\t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t </table>
\t \t \t \t <br>
\t \t \t \t <input type=submit value=Find id=locateByAddress ng-click="locate.locateByAddress();"></input>
\t \t \t \t <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
\t \t \t \t <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>
\t \t \t </div>
\t \t \t <div id="locateTab2" class="tab-pane">
\t \t \t \t <table id=locateRecord style="border-collapse: separate; border-spacing: 5px;">
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Entity Type</td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <select id=locateEntityType ng-change="locate.entityChanged();" ng-model="locate.entityType">
\t \t \t \t \t \t \t \t <option></option>
\t \t \t \t \t \t \t \t <option ng-repeat="(key, value) in locate.getJSON().dropdown" value="{{key}}">{{ value }}</option>
\t \t \t \t \t \t \t </select> \t
\t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr><td>Record Number</td><td><input id=recordNumberExistingRecord ng-model="locate.recordNumber" type=text name=recordNumber></td></tr>
\t \t \t \t </table>
\t \t \t \t <br>
\t \t \t \t <input type=submit value=Find id=locateByExistingRecord ng-click="locate.getLocationByEntity();"></input>
\t \t \t \t <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
\t \t \t \t <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>
\t \t \t </div>
\t \t \t <div id="locateTab3" class="tab-pane">
\t \t \t \t <table id=locateCoordinates style="border-collapse: separate; border-spacing: 5px;">
\t \t \t \t \t <tr><td>Longitude</td><td><input type=text ng-model=locate.locateByCoordinatelongitude></td></tr>
\t \t \t \t \t <tr><td>Latitude</td><td><input type=text ng-model=locate.locateByCoordinatelatitude></td></tr>
\t \t \t \t \t <tr><td></td><td><input type=button ng-click="locate.pickCoordinate();" id=coordinatePick name=locatePick value=PICK></td></tr>
\t \t \t \t </table>
\t \t \t \t <br>
\t \t \t \t <input type=submit value=Find id=locateByCoordinate ng-click="locate.locateByCoordinate();"></input>
\t \t \t \t <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input>
\t \t \t \t <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input>
\t \t \t \t <input type=button ng-click="locate.streetView();" ng-show="locate.streetViewCheck" value="Street View" id=streetView></input>
\t \t \t </div>
\t \t \t <div id="locateTab4" class="tab-pane" ng-show="locate.getJSON().geographyTab">
\t \t \t \t <div ng-html-compile="locate.getGeographyHTML()" | trust></div>
\t \t \t </div>
\t \t \t <div id="locateTab5" class="tab-pane" ng-show="locate.resultsTab">
\t \t \t \t <ul class="listAddress">
\t \t \t \t \t <li ng-repeat="list in locate.addressList" ng-click="locate.addressListClick($index);">
\t \t \t \t \t \t {{ list.formatted_address }}
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </div> <!-- /result tab -->
\t \t </div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->के साथ असंगत देखो जब मैं पाठ बॉक्स इन टैब के पक्ष में होना चाहते हैं, लेकिन वे जब टैब के नीचे जाने के कारण रखें। मैं इसे कैसे ठीक कर सकता हूं।