我是Bootstrap的新手，我无法弄清楚为什么这不起作用。这是html所以你可以自己看看。表单显示在左侧导航栏下方，而不是左侧导航栏右侧。
这是我认为导致问题的原因
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#nav1">Nav1</a></li>
<li><a data-toggle="tab" href="#nav2">Nav2</a></li>
<li><a data-toggle="tab" href="#nav3">Nav3</a></li>
</ul>
提前致谢
拉尔夫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Here</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<!-- Custom StyleSheet -->
<link href="css/styles.css" rel="stylesheet">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Orbitron:900' rel='stylesheet' type='text/css'>
<!-- Jquery css for search as you type -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<!--
************************
*** Fixed Top NavBar ***
************************
-->
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #1C2D8E">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="#">Logo Here</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Settings</a></li>
<li><a href="../navbar-static-top/">Support</a></li>
<li class="active"><a href="./">Help<span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<br /><br /><p>
<!--
*******************
*** Left navbar ***
*******************
-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar" style="background-color: #A4A4A4;">
<form id="form1" name="form1" method="post" action="" class="form-horizontal">
<br />
<input id="sites" name="site" type="text" class="form-control" value="" placeholder="Select a Site...">
<button name="submit">Select</button>
</form>
<hr>
<ul class="nav nav-sidebar">
<li class="active" id="#bg-dark-gray"><a id="font-yellow" href="#">Menu Item<span class="sr-only">(current)</span></a></li>
<li><a id="font-yellow" href="#">Menu Item</a></li>
<li><a id="font-yellow" href="#">Menu Item</a></li>
<li><a id="font-yellow" href="#">Menu Item</a></li>
<li><a id="font-yellow" href="">Menu Item</a></li>
<li><a id="font-yellow" href="">Menu Item</a></li>
<li><a id="font-yellow" href="">Menu Item</a></li>
<li><a id="font-yellow" href="">Menu Item</a></li>
<li><a id="font-yellow" href="">Menu Item</a></li>
<li><a id="font-yellow" href="">Menu Item</a></li>
</ul>
</div>
<!--
*****************************
*** Start Content Section ***
*****************************
-->
<div class="panel panel-default" style="background-color: #ddd">
<div class="panel-body">
<form id="form1" name="form1" method="post" action="" class="form-horizontal"><!-- START THE FORM -->
<!-- ************************* -->
<!-- F I R S T C O L U M N -->
<!-- ************************* -->
<div class="container-fluid">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#nav1">Nav1</a></li>
<li><a data-toggle="tab" href="#nav2">Nav2</a></li>
<li><a data-toggle="tab" href="#nav3">Nav3</a></li>
</ul>
<div class="tab-content">
<div id="nav1" class="tab-pane fade in active">
<div class="col-sm-4">
<div class="form-group">
<label for="inputCompany" class="col-sm-4 control-label">Company</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputFirstname" value="" placeholder="Company Name">
</div>
</div>
<div class="form-group">
<label for="inputLastname" class="col-sm-4 control-label">Address1</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputLastname" value="" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="inputFirstname" class="col-sm-4 control-label">Address2</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputFirstname" value="" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="inputLastname" class="col-sm-4 control-label">City</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputLastname" value="" placeholder="City">
</div>
</div>
<div class="form-group">
<label for="inputFirstname" class="col-sm-4 control-label">State</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputFirstname" value="" placeholder="State">
</div>
</div>
<div class="form-group">
<label for="inputLastname" class="col-sm-4 control-label">Zip Code</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputLastname" value="" placeholder="Zip Code">
</div>
</div>
</div>
<!-- ************************* -->
<!-- S E C O N D C O L U M N -->
<!-- ************************* -->
<div class="col-sm-4">
<div class="form-group">
<label for="inputEmail" class="col-sm-4 control-label">Phone</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputEmail" value="" placeholder="phone">
</div>
</div>
<div class="form-group">
<label for="inputUsername" class="col-sm-4 control-label">Fax</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputUsername" value="" placeholder="Fax">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputEmail" value="" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputUsername" class="col-sm-4 control-label">Website</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputUsername" value="" placeholder="Website">
</div>
</div>
</div>
</div>
</div>
</div>
</form> <!-- END THE FORM -->
</div>
</div><!-- END PANEL -->
</div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Copyright 2015 - Company Name <a href="#"></a></p>
</div>
</div>
<!-- JQuery (necessary for Bootstrap's javascript plugins) -->
<script src="https://ajax.googleapis.com/jax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (bellow) or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->
<!-- Jquery css for search as you type -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
var availableSites = [
"PRC of South Florida","Arte In Pietra","Blessed Pediatric Care" ];
$( "#sites" ).autocomplete({
source: availableSites
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
我认为您在“开始内容部分”的开头错过了panel的网格大小。如果您希望左侧边栏和面板在智能手机视图中彼此相邻，则还应将col-xs-...添加到两个div中。查看一个有效的示例****HERE****
<!--
*******************
*** Left navbar ***
*******************
-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar" style="background-color: #A4A4A4;">
和第二部分：
<!--
*****************************
*** Start Content Section ***
*****************************
-->
<div class="col-xs-9 col-sm-9 col-md-10 panel panel-default" style="background-color: #ddd">