gpt4 book ai didi

html - 在背景图像上垂直和水平对齐 bootstrap 4 容器列

转载 作者:行者123 更新时间:2023-11-28 02:20:14 26 4
gpt4 key购买 nike

在网上搜索了大约 5 个小时后,我得到的唯一结果是该列的每个子项都会水平排列。

我添加了导航栏,因为它有时会受到干扰。

<header>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="/">Name</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<div class="navbar-nav">
<form class="form-inline" action="/search">
<input class="form-control bg-dark text-light mr-sm-2 py-1" placeholder="Search" aria-label="Search" name="q" required type="search">
</form>
<a class="nav-item nav-link" href="#">One</a>
<a class="nav-item nav-link" href="#">Two</a>
<a class="nav-item nav-link" href="#">Three</a>
<!-- Right alignment needed -->
<a class="nav-item nav-link" href="/sign-in/"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Sign in</a>
</div>
</div>
</div>
</nav>

<!-- HERE - Hero image -->

<div id="intro">
<div class="container">
<div class="row">
<div class="col-md-10">
<h2 class="display-4 mb-2">My website</h2>
<hr>
<h4 class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
<a href="#">
<button class="btn btn-outline-light px-4 py-2">Action <i class="fa fa-rocket" aria-hidden="true"></i></button>
</a>
<div>
</div>
</div>
</div>

</header>

CSS

html,
body,
header,
#intro {
height: 100%;
}

#intro {
background: url("via.placeholder.com/2000x1000") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
}

我已经尝试了一系列的东西并删除了其中的大部分,但仍然有这些尝试,不过我清理了 html。

.parent {
position: relative;
margin: auto;
text-align: center;
align-items: center;
}
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

还尝试了 d-flex 解决方案,证明解决方案和其他...

所以我现在相信这与 Bootstrap 有关,但我不知道。

编辑:忘了说了,水平对齐可以这样实现:

margin: auto;
text-align: center;
align-items: center;

在专栏上。

最佳答案

这是你的意思吗?

https://jsfiddle.net/Aorus/z3p4s0t9/1/

您缺少的是将以下类添加到您的行中;

同时将您的页眉或任何其他父级设置为高度:100%。

html,
body,
header{
height: 100%;
}

#bg-container {
height: 100%;
background-image: url("http://i350.photobucket.com/albums/q409/spawn_065/galaxy.jpg");
background-position: center;
background-size: cover;
}

#image-container {
position: relative;
height: 300px;
width: 300px;
background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="/">Name</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<div class="navbar-nav">
<form class="form-inline" action="/search">
<input class="form-control bg-dark text-light mr-sm-2 py-1" placeholder="Search" aria-label="Search" name="q" required type="search">
</form>
<a class="nav-item nav-link" href="#">One</a>
<a class="nav-item nav-link" href="#">Two</a>
<a class="nav-item nav-link" href="#">Three</a>
<!-- Right alignment needed -->
<a class="nav-item nav-link" href="/sign-in/"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Sign in</a>
</div>
</div>
</div>
</nav>

<div id="bg-container">

<div class="row align-items-center justify-content-center h-100">
<div class="col-4">
<div id="image-container">
Image
</div>

</div>
</div>

</div>

</header>

关于html - 在背景图像上垂直和水平对齐 bootstrap 4 容器列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48249568/

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