Question

var app = angular
.module('webappApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl',
      controllerAs: 'main'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl',
      controllerAs: 'about'
    })
    .otherwise({
      redirectTo: '/'
    });
});


app.controller('HeaderCtrl', function ($scope, $location) { 
  $scope.isActive = function (viewLocation) { 
    return viewLocation === $location.path();
  };
});

我已经将col-lg-12给了一个div，但在给出位置时：修复了为什么它占用的最小尺寸。为什么我还需要给出宽度：百分之百的百分比。

Answer 1

您的正确架构（并非总是如此，但大部分时间）是：

container - row - col

所以在这种情况下它会是这样的：

 <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of typ
         </p>
      </div>
    </div>
 </div>

现在，如果文本没有一直到边缘，那是因为col-lg- *类的天沟填充为15px。只需删除col-lg- *类，你就会得到一条没有填充的行。

查看我的demo here

修改

归功于Tim Lewis：

＆＃34;容器和容器流体的边距均为15px，行的边距为-15px。确保不会使用-15px或30px的余量，具体取决于您使用它们的方式＆＃34;

Answer 2

一个简单的Bootstrap架构，如

<div class="container-fluid">
  ...
</div>

您可以在http://getbootstrap.com/css/#overview-container

上查看更多内容

Answer 3

我认为应该将其更正为

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
    </div>
  </div>
</div>

自举全宽。 div占用的空间更少

3 个答案: