在我的boostrap柱上有保证金

时间:2016-05-24 18:19:53

标签: twitter-bootstrap css3

我是初学者。为什么我的主框(ng-view)有边距?

我尝试将零填充设置为.container,将余量设置为.row,但它不起作用。

是否因为AngularJS ng-view?

你能看一下吗?

<!DOCTYPE html>
<html lang="" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- developed by Min Htet Oo -->
    <title>gym</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
      .main-box {
        margin-top: 50px;
        background-color: aqua;
      }
      .container-fluid {
        padding: 0!important;
      }
      .container {
        padding: 0!important;
      }
      .row {
        margin: 0!important;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <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" href="#">blar blar blar :3</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
              <li><a href="#/item">Item</a></li>
              <li><a href="#/sale">Stock</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="row">
        <div class="col-md-12 main-box" ng-view></div>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

2 个答案:

答案 0 :(得分:0)

不,ng-view不会影响您的CSS。这可能是由于您的divbody标记造成的。

答案 1 :(得分:0)

如果您希望.main-box类填充整个宽度,则需要将.container类更改为.container-fluid.这是您的问题的引导程序。

http://v4-alpha.getbootstrap.com/layout/grid/#how-it-works