Question

在使用bootstrap或任何HTML时，我是一个完整的菜鸟。我为我的高中机器人团队使用photoshop和一个简单的导航栏制作了一个简单的横幅，但我无法理解bootstrap的网格系统。出于某种原因，我的导航栏正在切断我的横幅。我想要导航栏下方的横幅，我将如何使用bootstrap？

<!DOCTYPE html>
<html>
<head>

<title>Robotics Team 3774 Home</title>

<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">


<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<!-- Navbar -->

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Team 3774</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 0.866667px;">
            <ul class="nav navbar-nav">
                <li><a href="#">Team Bio</a></li>
                <li><a href="#">Our Robot</a></li>
                <li><a href="#">Our Coach</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Outreach</a></li>
                <li><a href="#">Youtube</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Banner -->
<div class="banner">
    <img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>




</body>

Answer 1

Bootstrap实际上没有横幅元素，并且网格系统不一定与将这样的项目放入页面有关。如果你想要一个横跨页面的横幅，就像导航栏一样，那么你可能想要查看他们的Jumbotron元素。你真正需要做的就是用“jumbotron”替换你的“banner”类，如下所示：

<!-- Banner -->
<div class="jumbotron">
    <img src="Banner.png" class="img-responsive" alt="Reponsive image" />
</div>

然后你只需要添加一些自定义样式来隐藏灰色背景并让你的横幅图像占据屏幕的宽度：

.jumbotron {
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
}

应该这样做。一旦我看到您发布了指向您网站的链接，我就必须编辑我的答案。

演示Here

Answer 2

在容器标记

中包含您的横幅

<head>

<title>Robotics Team 3774 Home</title>

<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">


<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<!-- Navbar -->

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Team 3774</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 0.866667px;">
            <ul class="nav navbar-nav">
                <li><a href="#">Team Bio</a></li>
                <li><a href="#">Our Robot</a></li>
                <li><a href="#">Our Coach</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Outreach</a></li>
                <li><a href="#">Youtube</a></li>
            </ul>
        </div>
    </div>
   <!-- Banner -->
<div class="banner">
    <img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</div>

Answer 3

只需在CSS中添加以下行：

body
{
    padding-top:50px;
}

你应该好好去。

这通常在使用navbar-fixed-top时在Bootstrap中完成。

如何使用Bootstrap设置我的标头？

3 个答案: