编辑：工作版

Question

我目前正在使用Bootstrap 3尝试创建网站。我希望顶部有一个标题，如本例所示。这些方框就是为了给你一个关于我的网格现在如何布局的例子。

用语言来说，我需要它：

整个事物的背景图像（这是图像中的颜色部分，黄色和蓝色都是一个图像）
我的横幅所在的左侧空白部分（这将是黄色和蓝色图像的一部分）
右边有两个导航栏（顶部是社交媒体链接，底部是导航链接）。我希望它们叠加在一起，然后放在col-md左侧横幅下面。

到目前为止，我一直在尝试使用网格布局，但它不起作用：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="row" style="background: url(images/header.jpg) no-repeat; color:#fff; height:100px;">
    <div class="col-lg-6" style="border-color: #F0F; border: dashed;">
      <img src="images/empty.gif" height="100" border="0">
    </div>
    <div class="col-lg-6" style="border-color: #F0F; border: dotted;">

      <div class="navbar navbar-default navbar-static-top">
        <div class="navbar-inner">
          <ul class="nav">
            <li><a href="#">FB</a></li>
            <li><a href="#">Tumblr</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">You Tube</a></li>
          </ul>
        </div>
      </div>

      <div class="navbar navbar-default">
        <div class="navbar-inner">
          <ul class="nav">
            <li class="active"><a href="#" id="link">Home</a></li>
            <li><a href="#" id="link">About</a></li>
            <li><a href="#" id="link">Characters</a></li>
            <li><a href="#" id="link">Archive</a></li>
            <li><a href="#" id="link">Gallery</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

＆＃13;

问题很多，但我遇到的主要问题是让两个导航栏在一列中堆叠，同时保持左侧空。响应时，两个导航栏应低于空白区域。除了其他问题，这就是我需要帮助的地方。

使用网格是最好的方法，还是有更好的方法？

当前状态（根据@Marc Barbeau的回答更改我的代码后）：请注意，两个导航栏不会下拉到横幅下方，并且底部导航栏不会移动到第一个导航栏下方。

的Col-LG

的Col-SM

我认为它应该以小视图显示 当然，菜单的其余部分和猫图片将在屏幕下方。

编辑：工作版

的index.html

<div class='header'>
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div id="logo">

            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <nav class="navbar">
            <div class="container-fluid">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#" class="link">Home</a></li>
                    <li><a href="#" class="link">About</a></li>
                    <li><a href="#" class="link">Characters</a></li>
                    <li><a href="#" class="link">Archive</a></li>
                    <li><a href="#" class="link">Gallery</a></li>
                </ul>
            </div>
        </nav>
        <nav class="navbar">
            <div class="container-fluid">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">FB</a></li>
                    <li><a href="#">Tumblr</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">You Tube</a></li>
                </ul>
            </div>
        </nav>
        </div>
    </div>
</div>

的style.css

.header{
  background-image: url("../images/header.jpg");
  background-repeat: no-repeat;
  height: 100px;
}
@media(min-width: 300px){
  .header .nav>li {
    float: right !important;
  }
}

#logo{
  background-color: rgba(255,0,0,0); 
  height: 100px;
}

＆＃13;

.header{
  background-image: url("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
  background-repeat: no-repeat;
  height: 100px;
}
@media(min-width: 300px){
  .header .nav>li {
    float: right !important;
  }
}

#logo{
  background-color: rgba(255,0,0,0); 
  height: 100px;
}

＆＃13;

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href="custom.css"> -->
</head>

<body>
  <div class='header'>
	<div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div id="logo">
        
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <nav class="navbar">
            <div class="container-fluid">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#" class="link">Home</a></li>
                    <li><a href="#" class="link">About</a></li>
                    <li><a href="#" class="link">Characters</a></li>
                    <li><a href="#" class="link">Archive</a></li>
                    <li><a href="#" class="link">Gallery</a></li>
                </ul>
            </div>
        </nav>
        <nav class="navbar">
            <div class="container-fluid">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">FB</a></li>
                    <li><a href="#">Tumblr</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">You Tube</a></li>
                </ul>
            </div>
        </nav>
        </div>
    </div>
</div>
</body>

＆＃13;

Answer 1

一些注释

删除内联css以提高可读性
创建一个custom.css文件（确保在bootsrap css之后包含以覆盖样式）
了解breakpoints
Bootstrap断点将在768px下堆叠导航（使用custom.css覆盖）
id =“link”重复，请参阅https://css-tricks.com/the-difference-between-id-and-class/

代码

index.html

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<div class='header'>
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div id="logo">

            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <nav class="navbar">
              <div class="container-fluid">
                  <ul class="nav navbar-nav navbar-right">
                      <li class="active"><a href="#" class="link">Home</a></li>
                      <li><a href="#" class="link">About</a></li>
                      <li><a href="#" class="link">Characters</a></li>
                      <li><a href="#" class="link">Archive</a></li>
                      <li><a href="#" class="link">Gallery</a></li>
                  </ul>
              </div>
          </nav>
          <nav class="navbar">
              <div class="container-fluid">
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="#">FB</a></li>
                      <li><a href="#">Tumblr</a></li>
                      <li><a href="#">Twitter</a></li>
                      <li><a href="#">You Tube</a></li>
                  </ul>
              </div>
          </nav>
        </div>
    </div>
 </div>

<强> custom.css

.header{
  background-image: url("http://i.stack.imgur.com/v2UgD.jpg");
  background-repeat: no-repeat;
  height: 100px;
  background-color: black;
  background-size: 500px;
}

@media(min-width: 500px){
  .header .nav>li {
    float: right !important;
  }
}

@media(max-width: 500px){
  .header{
    background-size: 100vw;
  }
}

#logo{
  background-color: rgba(255,0,0,0); 
  height: 100px;
}

#logo{
  background-color: red;    
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 100px;
  background-image: url("images/header.jpg");
}

修改

添加了几行额外的CSS以缩小500px下的背景徽标图像。

HTML Bootstrap - 横幅图片+导航

编辑：工作版

1 个答案:

一些注释

代码

修改

Demo