如何删除".container-fluid“中元素周围的空格？
如何删除".container-fluid“中元素周围的空格？
提问于 2021-01-13 04:09:12
在这里，我使用display: flex;创建了一个标题，以便完美地将元素水平居中，而不是垂直居中。不使用Bootstrap，一切工作正常，但只要我添加Bootstrap CSS到我的HTML中，它们就会跳到.container的中心，它们之间有一些间距，我希望我的.right-svg和.nike-svg被放置在它们的.container的最右边和最左边的空白处。
注意:这个代码片段的结果正是我想要的样子，但是请像我一样将Bootstrap CSS3添加到这个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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-13 04:33:01
将类名.container-fluid更改为其他名称，因为这是bootstrap预定义类。
您可以将类名更改为您想要的任何其他名称。
Stack Overflow用户
发布于 2021-01-13 04:25:54
将.col添加到<div class="col-xs-12">。
有没有可能，你在看Bootstrap 5指南的同时正在使用Bootstrap 4？
/*====================== 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;
}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main>
<!-- ================ header ============== -->
<header>
<div class="row">
<div class="col col-xs-12"> <!-- ← ADD .col HERE ← -->
<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="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65691325
复制相关文章
相似问题
腾讯云开发者
