Question

我一周前刚开始学习HTML和CSS，并且一直在学习使用coursera和codeacademy。我想创建一个使用bootstrap的简单网站，顶部有导航栏，下面有一个大封面图片。

代码如下所示。

<body>
    <header class="container">
        <div class="logo"> <!--this is where the logo resides-->
            <div class="row">  <!--making a row for header elements-->

                <figure class="col-xs-7">
                    <a href="/"> </a> 
                </figure>

                <div class="col-xs-5" > <!--adds the 3 buttons on top right-->
                    <button type="button">
                        <em class="cogs"> </em>
                    </button>

                    <button type="button">
                        <em class="cogs"> </em>
                    </button>

                    <button type="button">
                        <em class="cogs"> </em>
                    </button>

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

        </div>

    </header>

    <div class="jumbotron">
        <div class="row">
            <figure class="col-xs-12"> </figure> <!--cover pic-->

        </div>
    </div>

</body>
</html>

当我在浏览器中打开html（带样式表）时，我会附上图像。 enter image description here。我虽然封面照片会自动对齐在顶部导航栏下面的12列网格内，裁剪出两侧。我的问题是： 1.不在12网格系统中自动添加图像吗？ 2.如何将导航栏右上方的3个图标（即列的右侧）按下？

非常感谢！我很感激提前提出任何建议或建议。

Answer 1

我认为jumbotron类是有目的地格式化以到达页面的边缘。

如果我正确理解您的问题，因为不希望jumbotron延伸到屏幕边缘，您可能希望将jumbotron放在div class =“container”中W3CSchools suggests

Bootstrap v3很简洁，因为它已经创建了tools like the nav bar。您可以尝试使用“＆lt; nav＆gt;”标签和无序列表如下：

  <nav class="navbar navbar-default">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="#">
             <!--- image of your logo -->
      </a>         
    </div>
     <ul class="nav navbar-nav navbar-right">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Page 1</a></li>
       <li><a href="#">Page 2</a></li> 
       <li><a href="#">Page 3</a></li> 
     </ul>
  </div>
</nav>

将jumbotron图像对齐在同一个12列网格中

1 个答案: