javascript - how to remove space from html using bootstrap -
i trying make html page show in image having desktop item , mobile item .i using bootstrap css + angular .
why white space come ..here code http://plnkr.co/edit/g8mp53rqlf562hekgmgt?p=preview
here image
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') }) }
secondly
what use in bootstrap when display on desktop show three item in row show in desktop image below , if display on mobile device display vertically show in image mobile item
desktop
updated 1 http://plnkr.co/edit/g8mp53rqlf562hekgmgt?p=preview
how come in single vertical column when user move desktop mobile version
why white space come
bootstrap, default, adds 20px margin below navigation prevent next element sticking it. suggest move green background color body
instead of next element. way, page gets uniform green (avoids white gap) , items spaced away nav.
what use in bootstrap when display on desktop show 3 item in row show in desktop image below , if display on mobile device display vertically show in image mobile item
bootstrap has 12-column grid system. uses convention of col-*-*
first asterisk denotes "break" (when grid styling changes, depending on page width) , second asterisk column size (1-12, 12 being full-width). since need 3 items, need width of 4 each of 3 items.
<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>
Comments
Post a Comment