Problems with format of elements outside the navbar in bootstrap

Navigation
0

I am using Bootstrap 4.0. I want to put in the navigation bar some elements that are not inside the menu on the right side of the navbar. But the text is displayed in a different format than the text within the navbar. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    	    <span class="navbar-toggler-icon"></span>
    	  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto text-center">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    	          Dropdown
    	        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Disabled</a>
        </li>
      </ul>

      <div class="text-center">
        <a class="navbar-brand" href="#">Elemento1</a>
        <a class="navbar-brand" href="#">Elemento2</a>
        <a class="navbar-brand" href="#">Elemento3</a>
      </div>
    </div>
  </div>
</nav>

In the Bootstrap models there is not something similar. How can i fix this? Element1 , Element2 and Element3 I want them to have the same format as the menu.

    
asked by Piropeator 31.03.2018 в 05:09
source

1 answer

1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    	    <span class="navbar-toggler-icon"></span>
    	  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto text-center">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    	          Dropdown
    	        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Disabled</a>
        </li>

      </ul>
   

 <ul class="nav navbar-nav pull-xs-right">
<li clas"nav-item">
    <a href="#" class="nav-link"> Elemento 1 </a>
    </li>
<li clas"nav-item">
        <a href="#" class="nav-link"> Elemento 2 </a>
        </li>
<li clas"nav-item">
        <a href="#" class="nav-link"> Elemento 3 </a>
        </li>
</ul>
    </div>
  </div>
</nav>

You solve it by removing the div of the elements you want to the right and you put them identical as the others in their respective ul and li but in your label ul you add the class pull-xs-right , and you would have to change the xs depending on the view you need.

Because according to the bootstrap documentation, as you were trying it is useful but only for text

    
answered by 06.04.2018 / 01:42
source
Unknown error in Genexus 15 Create interface with ArrayList