Welcome to ZaiNaLe Developer Community-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
976 views
in Technique[技术] by (71.8m points)

css - How do I remove spacing around elements inside ".container-fluid"?

Here I'm creating a header with display: flex; for perfect horizontally centering my elements inside that and not vertically centering them. Without using Bootstrap, everything works right, but as soon as I add Bootstrap CSS to my HTML, they just leap into the center of the .container with a little spacing between them, I want my .right-svg and .nike-svg to be placed at the very right and left spaces in their .container.

NOTE: The result f this snippet is exactly what I want it to look like, but please add Bootstrap CSS 3 to this HTML as I did, and the problem will be shown. Any advises is welcome.

*,
*::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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Change the class name .container-fluid to something else as that is a bootstrap predefined class.

You can change the class name to anything else you want.

Codepen: https://codepen.io/manaskhandelwal1/pen/mdrzqOM


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to ZaiNaLe Developer Community-Open, Learning and Share
...