Question

我正在尝试设置我的rails应用程序，安装了bootstrap，看起来类似于引导带主页或这两个站点中的任何一个的基本布局：

http://twitter.github.io/bootstrap/

https://www.gathercontent.com/

我特别遇到问题的部分是在这两个页面的顶部设置图像。导航栏正下方有一个图像。然后它会分裂并且新的背景将图像/标题部分与下面的网站的其余部分分开（通常这是大部分内容的位置）。

我目前在页面顶部有一个图像，但图像和导航栏之间有一些填充类型（在该空间内可以看到我的主背景）。我尝试添加一个带负值的padding-top元素，但它没有做到这一点。有谁知道我怎么能得到那个间距或填充，所以我的导航栏和图像之间没有空格？

以下是我的一些代码：

_header.html.erb

header>
    <div class="masthead">
  <%= image_tag 'ctclogonew.png', alt: 'logo' %>
    </div>

  </header>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container"


      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#"></a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">

        <li><%= link_to "Home", root_path %></li>
        <li><%= link_to "About", about_path %></li>

        <!-- .nav, .navbar-search, .navbar-form, etc -->
        </ul>
      </div>

    </div>
  </div>
</div>

styles.css.scss

$navbarBackgroundHighlight: #ff3600;
$navbarBackground: #ff3600;
$navbarLinkColor: #ffffff;
$headingsColor: green;
$heroUnitBackground: #00cbcc;


@import 'bootstrap';

.logo {

    margin-left: auto;
    margin-right: auto;
    width: 50em;

}

.masthead {
    background: url('basic background.jpg');
    background-repeat: no-repeat;
    background-size:100% 100%;
    height: 600px;
}
body {
    padding-top: 60px;
    background: url('escheresque_@2X.png');
}

@import 'bootstrap-responsive';

任何见解都将不胜感激，谢谢：）

Answer 1

您可能需要在style.css.scss中调整以下规则：

body {
    padding-top: 60px;
}

如果padding-top设置为40px，那么看起来很正常。

Answer 2

如果你已经为你的页面添加了一个名为docs.css的twitter bootstrap插件，那么你需要在你的样式表上覆盖它作为body {padding：0;}，因为doc.css已将它们的样式表设置为如下所示 {padding-top：40px;}

使用Twitter Bootstrap在Nav Bar和Image之间留出额外空间

2 个答案: