1

Gostaria de diminuir a distância entre os 2 links no menu, vou deixar uma imagem e o meu código

<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>

aqui deixo uma imagem para ficar melhor exemplificado. inserir a descrição da imagem aqui

1
  • 1
    No CSS selecione seu elemento, no seu casso acho que é .collapse e defina as propriedades colocando um !important ao final para sobrepor outras definições já aplicadas anteriormente.
    – brunox99x
    28/03/2019 às 19:33

1 Resposta 1

1

Jovem pq vc está usando a classe Card e Card-body no seu ítem de menu! que doidera rss

inserir a descrição da imagem aqui

Tire essas classe e acrescente apenas um margin-left para indentar, usei a clase ml-4 para isso, e ficou bom veja ai.

<!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>

2
  • eu estava gostando do fundo branco que o card fazia, mas eu resolvi deixar tudo verde e acabei não tirando 28/03/2019 às 19:48
  • @RicardoGonçalves imaginei que vc poderia ter copiado e colado de algum outro lugar ai vei com as classes etc. Cara da uma lida na documentação oficial tem muita coisa legal lá, inclusive cores que vc usa assim no elemento bg-dark ai o fundo fica escuro, não precisa usar classe do Card pra isso 28/03/2019 às 19:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .