fijar nav-tabs de boostrap arriba

publicado por: Anonymous

Me gustaría fijar nav-tabs de boostrap en la parde de arriba pero por mas que leo no hay nada que lo haga. Para la barra de navegación si se describe perfectamente pero no para el nab-tabs. Me estoy refiriendo a un fixed-top, a que cuando haga un scroll vertical, la nav-tab siga viendose. Actualmente es mi menu y me gustaría que se siguise viendo cuando bajo en la pagina.

Este es el código de boostrap

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

solución

en la documentacion oficial de Bootstrap se encuentra como es la sintaxis, de todas maneras te comparto un ejemplo para que veas como es la estructura, por defecto si el orden es el siguiente los tabs se colocan automáticamente debajo de la barra de navegación y quedan en la parte superior.

Te dejo un ejemplo para que puedas probarlo Saludos!

_x000D_

_x000D_

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>_x000D_
<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>_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>_x000D_
_x000D_
_x000D_
<nav class="navbar navbar-expand-lg navbar-light bg-light">_x000D_
  <a class="navbar-brand" href="#">Navbar</a>_x000D_
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">_x000D_
    <span class="navbar-toggler-icon"></span>_x000D_
  </button>_x000D_
_x000D_
  <div class="collapse navbar-collapse" id="navbarSupportedContent">_x000D_
    <ul class="navbar-nav mr-auto">_x000D_
      <li class="nav-item active">_x000D_
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>_x000D_
      </li>_x000D_
      <li class="nav-item">_x000D_
        <a class="nav-link" href="#">Link</a>_x000D_
      </li>_x000D_
      <li class="nav-item dropdown">_x000D_
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">_x000D_
          Dropdown_x000D_
        </a>_x000D_
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">_x000D_
          <a class="dropdown-item" href="#">Action</a>_x000D_
          <a class="dropdown-item" href="#">Another action</a>_x000D_
          <div class="dropdown-divider"></div>_x000D_
          <a class="dropdown-item" href="#">Something else here</a>_x000D_
        </div>_x000D_
      </li>_x000D_
      <li class="nav-item">_x000D_
        <a class="nav-link disabled" href="#">Disabled</a>_x000D_
      </li>_x000D_
    </ul>_x000D_
    <form class="form-inline my-2 my-lg-0">_x000D_
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">_x000D_
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>_x000D_
    </form>_x000D_
  </div>_x000D_
</nav>_x000D_
_x000D_
<ul class="nav nav-tabs" id="myTab" role="tablist">_x000D_
  <li class="nav-item">_x000D_
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>_x000D_
  </li>_x000D_
  <li class="nav-item">_x000D_
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>_x000D_
  </li>_x000D_
  <li class="nav-item">_x000D_
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>_x000D_
  </li>_x000D_
  <li class="nav-item">_x000D_
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>_x000D_
  </li>_x000D_
</ul>_x000D_
_x000D_
_x000D_
<div class="tab-content">_x000D_
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">_x000D_
      <h3>Home</h3>_x000D_
  </div>_x000D_
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">_x000D_
  <h3>Profile</h3>_x000D_
  </div>_x000D_
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">_x000D_
  <h3>Messages</h3>_x000D_
  </div>_x000D_
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">_x000D_
  <h3>Settings</h3>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *