How to remove spaces in bootstrap?

Navigation
2

I'm starting with some web design but I've encountered this problem that I've been trying to remove for a while. I would like to eliminate the space that is between the logo of the page and the start link: 

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <ul class="nav navbar-header">
                <a href="index.jsp"><img src="images/LOGO.png" width="15%"/></a>
            </ul>
            <ul class="nav navbar-nav">
                <li class="col-xl-3"><a href="index.jsp">Inicio</a></li>
                <li class="col-xl-3"><a href="login.jsp">Entrar</a></li>
            </ul>
        </div>
    </nav>
</body>

I use the default definitions of bootstrap 3, I have not modified anything.

Help pls !!

    
asked by Jonathan 12.01.2018 в 05:56
source

2 answers

2

Classes for columns are .col-xs- for very small devices, .col-sm- small devices, .col-md- medium devices and .col-lg- large devices.

Perhaps the class you want to refer to is col-xs instead of col-xl , also be careful with that width of 15% is what causes the first link to separate so much, besides they need some details for the responsive mode like the menu collapse (possible final result) 

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.jsp"><img src="images/LOGO.png" width="80"/></a>
    </div>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="nav navbar-nav">
          <li ><a href="index.jsp">Inicio</a></li>
          <li ><a href="login.jsp">Entrar</a></li>
      </ul>
    </div>
  </div>
</nav>
    
answered by 12.01.2018 / 06:25
source
1

The problem is putting your image width="15%" , according to the documentation :

  

The CSS width property specifies the width of the content area of an element. The content area is within the padding, border, and margin of the element.

And to put a percentage will take as a reference the width of the container, in conclusion you're telling your image to occupy 15% of your container

Remove that piece of code and you'll be fine.

I leave you the documentation on the attributes that carry the tags

    
answered by 12.01.2018 в 06:23
Sign XML document with sha256 signature method MySQL error: # 1690 - BIGINT UNSIGNED value is out of range in