如何使用bootstrap从html中删除空格

Question

我正在尝试将html页面显示在具有桌面项目和移动项目的图像中。我正在使用bootstrap css + angular。

为什么有空白空间..这是我的代码 http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview

这是我的图片

var myApp = angular.module('myApp', ['ui.bootstrap','ionic']);

    //myApp.directive('myDirective', function() {});
    myApp.controller('MyCtrl', MyCtrl);

    function MyCtrl($scope,$http) {
        $http.get("menu.json").success(function(data){
         $scope.menu=data;
        }).error(function(){
             alert('error')
        })
    }

其次

当它在桌面上显示时在bootstrap中显示什么，它在行中显示三个项目，如下面的桌面图像所示，如果它显示在移动设备上，它将垂直显示，如图所示 移动商品

桌面

更新了一个 http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview

当用户将桌面移动到移动版本时，如何进入单个垂直列

Answer 1

  

白色空间来的原因

默认情况下，Bootstrap在导航下方添加了20px的边距，以防止您的下一个元素粘在它上面。我建议您将绿色背景颜色移动到body而不是下一个元素。这样，您的页面就会变成绿色均匀（避免白色间隙），并且您的项目与导航栏之间的距离正确。

  

在桌面上显示时在bootstrap中使用的内容显示在下面的桌面图像中显示的三个项目，如果它显示在移动设备上，则显示为垂直显示在图像中移动项目

Bootstrap有一个12列的网格系统。它使用col-*-*的约定，其中第一个星号表示“中断”（当网格样式更改时，取决于页面宽度），第二个星号是列大小（1-12,12是全宽） 。由于您需要3个项目，因此您需要为3个项目中的每个项目选择宽度为4。

<div class="container">
  <div class="row">
    <div class="col-sm-4">item1</div>
    <div class="col-sm-4">item2</div>
    <div class="col-sm-4">item3</div>
  </div>
  <div class="row">
    <div class="col-sm-12">Lorem ipsum dolor...</div>
  </div>
</div>