gpt4 book ai didi

html - 在 bootstrap 4 中创建三个居中网格

转载 作者:太空宇宙 更新时间:2023-11-04 06:31:35 25 4
gpt4 key购买 nike

我有时会尝试模仿 IG 的导航栏。

我试图将所有元素居中: Logo 、搜索栏和头像图标,并使它们在屏幕中央都有空间,就像您在这里看到的那样:

enter image description here

然而,即使我使用了 col-push,它也不会改变我的网格的行为:

<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-12 no-space">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="col-lg-4">
<a class="navbar-brand white">LifeShot</a>
</div>

<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNavDropdown">
<div class="col-lg-4">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
</div>

<div class="col-lg-4">
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>
</div>
</nav>
</div>
</div>
</div>

这是 jsfiddle .

知道我在这里错过了什么吗?

最佳答案

      .body {
width: 100%;
}

.white {
color: #fff !important;
}

.no-space {
padding: 0;
margin: 0;
}

.align-center {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-12 no-space">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="col-lg-4 col-md-4 col-sm-4">
<a class="navbar-brand white">LifeShot</a>
</div>

<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNavDropdown">
<div class="row no-gutter">

<div class="col-lg-6 col-md-6 col-sm-6 align-center">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
</div>

<div class="col-lg-6 col-md-6 col-sm-6 align-center">
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>

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

关于html - 在 bootstrap 4 中创建三个居中网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54626338/

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