【发布时间】：2021-04-17 20:09:25
【问题描述】：
在这里，我创建了一个带有display: flex; 的标题，以便将我的元素完美地水平居中而不是垂直居中。不使用 Bootstrap，一切正常，但只要我将 Bootstrap CSS 添加到我的 HTML，它们就会跳到 .container 的中心，它们之间有一点间距，我希望我的 .right-svg 和 .nike-svg 成为放置在其.container 的最左右空间。
注意：这个 sn-p 的结果正是我希望它看起来的样子，但是请像我一样将 Bootstrap CSS 3 添加到这个 HTML 中，问题就会出现。 欢迎任何建议。
*,
*::after,
*::before{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
main{
max-width: 100%;
}
/*====================== header ======================*/
header .row{
margin: 0;
}
header .row .col-xs-12{
padding: 0;
}
header .row .gen-nav-header{
height: 60px;
background-color: #e38d13;
}
header .row .gen-nav-header .container-fluid{
width: 96%;
height: 100%;
margin: auto;
border: 1px solid #000;
display: flex;
/*align-items: center;*/
justify-content: space-between;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .right-svg{
display: flex;
justify-content: end;
align-items: center;
border: 1px solid #000;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .nike-svg{
display: block;
position: relative;
left: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nike Official Site. Nike DE</title>
</head>
href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/nike-icon.jpg">
<body>
<main>
<!-- ================ header ============== -->
<header>
<div class="row">
<div class="col-xs-12">
<div class="gen-nav-header">
<div class="container-fluid">
<!------------------ right svg ------------------->
<div class="right-svg">
<span class="hamburger-menu-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24"><path d="M21 13H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0-8H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1z"></path></svg>
</span>
<span class="search-svg">
<svg class="pre-search-input-icon" fill="#111" height="30px" width="30px" viewBox="0 0 24 24"><path d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.39zM11 18a7 7 0 1 1 7-7 7 7 0 0 1-7 7z"></path></svg>
</span>
<span class="shopping-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24"><path d="M16 7a1 1 0 0 1-1-1V3H9v3a1 1 0 0 1-2 0V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1z"></path><path d="M20 5H4a2 2 0 0 0-2 2v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a2 2 0 0 0-2-2zm0 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7h16z"></path></svg>
</span>
</div>
<!----------------- end right svg ------------------->
<span class="nike-svg">
<svg class="pre-logo-svg" height="60px" width="60px" fill="#111" viewBox="0 0 69 32"><path d="M68.56 4L18.4 25.36Q12.16 28 7.92 28q-4.8 0-6.96-3.36-1.36-2.16-.8-5.48t2.96-7.08q2-3.04 6.56-8-1.6 2.56-2.24 5.28-1.2 5.12 2.16 7.52Q11.2 18 14 18q2.24 0 5.04-.72z"></path></svg>
</span>
</div>
</div>
</div>
</div>
</header>
</main>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>【问题讨论】：
-
哇，谢谢！我希望我能向你学习你是如何做到的。
-
您可以从开发人员工具中轻松获取。在代码中找到图片并复制 URL。
-
你想要其他图片吗？
-
仍在尝试在 Devtools 的代码中找到一个图像 URL，但我找不到。请把你给我的网址的位置截图给我好吗？
标签： css bootstrap-4 flexbox