gpt4 book ai didi

html - 在同一个 12 列网格中对齐超大屏幕图像

转载 作者:行者123 更新时间:2023-11-28 06:22:00 25 4
gpt4 key购买 nike

一周前才开始学习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 个图标推到导航栏的右侧(即列的右侧)?

非常感谢你们!感谢您提前提出任何意见或建议。

最佳答案

  1. 我认为 jumbotron 类的格式是故意设置为到达页面边缘的。

如果我正确理解您的问题,因为您希望超大屏幕延伸到屏幕边缘,您可能希望将超大屏幕放在 div class="container"中,如下所示W3CSchools suggests

  1. Bootstrap v3 很简洁,因为它已经创建了 tools like the nav bar .您可以尝试使用“< nav >”标签和无序列表,如下所示:

      <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>

关于html - 在同一个 12 列网格中对齐超大屏幕图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35531557/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com