我正在创建一个bootstrap网站,我有一个问题。我的左手侧边栏将始终叠加在网站内的其他项目上。
这将是主页。它旨在将PTech移动到页面的左侧。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="employee">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="./CSS/style.css">
<link rel="stylesheet" type="text/css" href="./CSS/bootstrap.css">
<title>Main Menu</title>
</head>
<body ng-controller="funct">
<div class="container-fluid">
<div class="row">
<div class="span12">
<h1>Employee Database</h1>
<hr />
</div>
<div class="navbar span 3">
<div class="navbar-inner span 3">
<ul class="nav nav-tabs span 3">
<li><a href="#">Home</a></li>
<li class="divider-vertical"></li>
<li><a href="#">About</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="span2">
PTech
</div>
<ng-view> </ng-view>
</div>
<div id="footer" class="footer">
<a href="index.html">Main</a> | <a href="aboutDev.html">About Developer</a>
</div>
</body>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.js"></script>
<script src="./JS/index.js"></script>
<script src="./JS/bootstrap.js"></script>
</html>
我的登录部分进入ng-view
<div class ="well" ng-model="login">
<br />Username:
<br/><input type="text" class="span3" placeholder="username" name="username" id="username" ng-model="username">
<br />Password:
<br/><input type="password" class = "span3" placeholder="password" name="password" id="password" ng-model="password">
<br />
<input type="submit" class="btn btn-primary"value="Sign in" ng-click="signIn()"> {{message}}
</div>
答案 0 :(得分:0)
我不确定我是否理解问题,但行似乎与跨度不一致。我还注意到代码中的span 3应该是span3
我认为每一行都包含span12。如果你想要一个左手侧栏,例如将行分为span3和span9,并将左手项放在span3 div中,其余内容放在span9 div中
答案 1 :(得分:0)
在col-sm-4
类的child divs
中指定row
或任何其他列大小。可以在此处找到文档:http://getbootstrap.com/css/