请问我这个左侧的垂直导航左边怎么有一段空

来源:4-1 编程挑战

qq_八戒_15

2019-01-02 10:55

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 实例 - 默认的导航栏</title>

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-inverse" role="navigation">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">菜鸟教程</a>

</div>

<div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">iOS</a></li>

<li><a href="#">SVN</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

Java

<b class="caret"></b>

</a>

<ul class="dropdown-menu">

<li><a href="#">jmeter</a></li>

<li><a href="#">EJB</a></li>

<li><a href="#">Jasper Report</a></li>

<li class="divider"></li>

<li><a href="#">分离的链接</a></li>

<li class="divider"></li>

<li><a href="#">另一个分离的链接</a></li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-right" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-default">提交</button>

</form>

</div>

</div>

</div>

</nav>

<div class="container">

   <div class="row">

      <div class="col-lg-2 col-md-2">

      <div class="container-fluid">

<ul class="nav nav-pills nav-stacked">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

  <li><a href="#">iOS</a></li>

  <li><a href="#">VB.Net</a></li>

  <li><a href="#">Java</a></li>

  <li><a href="#">PHP</a></li>

</ul>

</div>

      </div>

      <div class="col-lg-10 col-md-10">

<h1>控制管理台</h1>

<hr>

<button type="button" class="btn btn-default">默认按钮</button>

<button type="button" class="btn btn-primary">原始按钮</button>

<button type="button" class="btn btn-success">成功按钮</button>

<button type="button" class="btn btn-info">信息按钮</button>

<button type="button" class="btn btn-warning">警告按钮</button>

<button type="button" class="btn btn-danger">危险按钮</button>

      <div class="container">

      <div class="row">

<div class="col-md-6 col-lg-6">

</div>

<div class="col-lg-6 col-md-6">


</div>

      </div>

      </div>

      </div>      

   </div>

</div>

</body>

</html>


写回答 关注

1回答

  • 布恩迪亚
    2019-01-04 10:37:59

    用container-fluid试试

    把container替换掉

     container-fluid类宽度不管屏幕宽度大小,一直是100%

基于bootstrap的网页开发

Bootstrap框架的基础教程,学会用Bootstrap前端框架搭建网页

187683 学习 · 734 问题

查看课程

相似问题