0

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

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>

样式.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';

任何见解将不胜感激，谢谢:)

4

2 回答 2

1

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

body {
    padding-top: 60px;
}

padding-top如果设置为 ，它看起来很好40px。

于 2013-06-26T19:16:05.760 回答
0

如果您在页面中添加了一个名为 docs.css 的 twitter bootstrap 插件，那么您需要在样式表上将其覆盖为 body {padding:0;} 因为 doc.css 已将其样式表设置为如下 body {padding-顶部：40 像素；}

于 2013-09-26T20:59:15.587 回答