Decrease the distance between bootstrap pads

Asked

Viewed 149 times

1

I would like to reduce the distance between the 2 links in the menu, I will leave an image and my code

<div class="container-fluid">
    <header class="row">

    </header>
    <div class="row">
        <div class="col-md-2" style="background-color:#10A78B;height: 100%;position: fixed; width: 250px">
            <nav class="nav flex-column" style="padding-top:30px" >

                <a style="color:#fff" class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    Mercados
                </a>


                <div class="collapse" id="collapseExample">
                    <div class="card card-body" style="background-color:#10A78B;border:none;" >

                            <a style="color:#fff" class="nav-link" data-toggle="collapse" href="#matriz" role="button" aria-expanded="false">
                                Matriz
                            </a>


                        <div class="collapse" id="matriz">
                            <div class="card card-body" style="background-color:#10A78B;border:none;">
                                <a style="color:#fff;font-weight: bold" class="nav-link" href="#">Rede 103.0/24 - ADM</a>
                                <a style="color:#fff;font-weight: bold" class="nav-link" href="#">Rede 104.0/24 - Coletores</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="collapse" id="collapseExample">
                    <div class="card card-body" style="background-color:#10A78B;border:none;" >

                            <a style="color:#fff" class="nav-link" data-toggle="collapse" href="#torres" role="button" aria-expanded="false">
                                Torres
                            </a>


                        <div class="collapse" id="torres">
                            <div class="card card-body" style="background-color:#10A78B;border:none;">
                                <a style="color:#fff;font-weight: bold" class="nav-link" href="#">Rede 2.0/24</a>

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

                <a style="color:#fff" class="nav-link" href="#">Link</a>

            </div>
            <aside class="col-md-10" style="padding-left: 350px">
                teste
            </aside>
        </div>
        <footer class="row">

        </footer>
    </div>

here I leave an image to be better exemplified. inserir a descrição da imagem aqui

css twitter-bootstrap
  • 1

    In CSS select your element, in your Part I think it is . Collapse and set the properties by placing a ! Final port to override other previously applied definitions.

1 answer

1


Young pq you are using the Card and Card-body class in your menu item! what a crazy rss

inserir a descrição da imagem aqui

Take these classes and add only a margin-left to indent, I used ml-4 class for this, and it was good see there.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
  
</style>
</head>
<body>
  
    <div class="container-fluid">
        <header class="row">
    
        </header>
        <div class="row">
            <div class="col-md-2" style="background-color:#10A78B;height: 100%;position: fixed; width: 250px">
                <nav class="nav flex-column" style="padding-top:30px" >
    
                    <a style="color:#fff" class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                        Mercados
                    </a>
    
    
                    <div class="collapse" id="collapseExample">
                        <div class="ml-4" style="background-color:#10A78B;border:none;" >
    
                                <a style="color:#fff" class="nav-link" data-toggle="collapse" href="#matriz" role="button" aria-expanded="false">
                                    Matriz
                                </a>
    
    
                            <div class="collapse" id="matriz">
                                <div class="ml-4" style="background-color:#10A78B;border:none;">
                                    <a style="color:#fff;font-weight: bold" class="nav-link" href="#">Rede 103.0/24 - ADM</a>
                                    <a style="color:#fff;font-weight: bold" class="nav-link" href="#">Rede 104.0/24 - Coletores</a>
    
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collapse" id="collapseExample">
                        <div class="ml-4" style="background-color:#10A78B;border:none;" >
    
                                <a style="color:#fff" class="nav-link" data-toggle="collapse" href="#torres" role="button" aria-expanded="false">
                                    Torres
                                </a>
    
    
                            <div class="collapse" id="torres">
                                <div class="ml-4" style="background-color:#10A78B;border:none;">
                                    <a style="color:#fff;font-weight: bold" class="nav-link" href="#">Rede 2.0/24</a>
    
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <a style="color:#fff" class="nav-link" href="#">Link</a>
    
                </div>
                <aside class="col-md-10" style="padding-left: 350px">
                    teste
                </aside>
            </div>
            <footer class="row">
    
            </footer>
        </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

  • I was enjoying the white background that card did, but I decided to leave everything green and ended up not taking

  • @Ricardogonçalves imagined that you could have copied and pasted from somewhere else there come with the classes etc. Cara da uma lida na documentação oficial has a lot of cool stuff there, including colors that you use so in the element bg-dark then the background turns dark, you don’t need to use Card class for this

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.