0

ブートストラップ ホームページまたは次の 2 つのサイトの基本的なレイアウトに似たものになるように、ブートストラップをインストールして Rails アプリをセットアップしようとしています。

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

https://www.gathercontent.com/

私が特に問題を抱えている部分は、これらの両方のページの上部に画像を設定することです. ナビゲーションバーのすぐ下に画像があります。次に分割され、新しい背景が画像/ヘッダー部分と下の Web サイトの残りの部分を分離します (通常、これはコンテンツの大部分がある場所です)。

現在、ページの上部に画像がありますが、画像とナビゲーションバーの間にある種のパディングがあります (そのスペース内にメインの背景が表示されます)。負の値の 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

0

docs.css という Twitter ブートストラップ用のプラグインをページに追加した場合、スタイル シートで body {padding:0;} としてオーバーライドする必要があります。上: 40px;}

于 2013-09-26T20:59:15.587 に答える