Xóa khoảng trống giữa thanh điều hướng và jumbotron trong Bootstrap 3

Question

Có khoảng trống giữa thanh điều hướng và jumbotron trong bootstrap 3. Cũng có khoảng trống giữa hình thu nhỏ và 3 hình thu nhỏ ngang. Tôi muốn thoát khỏi không gian này. Tôi có phải thay đổi CSS và thay đổi phần đệm hay cách tốt nhất?

_Header

<nav class="navbar navbar-inverse" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <div style="font-family:Webdings;"> 
     <%= link_to "Project", root_path, class: 'navbar-brand' %> 
    </div> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><%= link_to "About", about_path %></li> 
     <li><%= link_to "Team", team_path %></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources<b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><%= link_to "Action 1", about_path %></li> 
      <li><%= link_to "Action 2", about_path %></li> 
      <li><%= link_to "Action 3", about_path %></li> 
      <li><%= link_to "Action 4", about_path %></li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Contact", contact_path %></li> 
     <li><%= link_to "Sign Up", register_path %></li> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav 

Home (với hình thu nhỏ)

<%= provide(:title, "Home") %> 
<div class="jumbotron"> 
    <div class="container"> 
    <h1>Welcome to club!</h1> 
    <p>blabla</p> 
    <p><a class="btn btn-primary btn-lg">Sign Up</a></p> 
    </div> 
</div> 


<div class="column"> 
    <div class="col-xs-4"> 
    <div class="thumbnail"> 
     <img src="http://b2bleadblog.com/images/2007/05/18/huddlehands.jpg" alt="My Image" /> 
     <div class="caption"> 
     <h3>Blablabla</h3> 
     <p style="font-size:17px">Blablalbal.</p> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Đôi khi vấn đề là không gian phụ trong HTML, hãy thử:

<div class="jumbotron"> 
    ... 
    <p><a class="btn btn-primary btn-lg">Sign Up</a></p> 
    </div> 
</div> 
<div class="column"> 
    <div class="col-xs-4"> 
    ... 
</div> 

Lưu ý rằng Tôi đã xóa t wo \n giữa các div.

Answer 2

Bạn phải đặt các lớp margin-bottom:0; thành navbar và jumbotron. Bạn có thể sử dụng biểu định kiểu tùy chỉnh để ghi đè điều này. Sử dụng CSS tùy chỉnh bên cạnh tham chiếu css bootstrap. như sau:

<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" /> 
    <link href="../css/CustomStyles.css" rel="stylesheet" type="text/css" /> 

Xem bootply ví dụ này