Customizing Navbar

问题

I'm trying to design my navbar for my site, to be used in desktop and mobile mode.

I've created a JS Fiddle here

This the html so far:

<div class="container-fluid">
  <nav class="navbar navbar-expand-sm navbar-light">
    <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">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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 disabled" href="#">Disabled</a>
        </li>
      </ul>



      <div class="row no-gutters ml-auto">

        <div class="col-3">
          <button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'>
                        <i class="fas fa-sign-in-alt mr5"></i>
                        Login
                    </button>
        </div>
        <div class="col-6 ml-auto">
          <form class="form-inline mr-1" action='/search' method='POST'>
                        <div class="input-group input-group-sm mx-auto">
                          <input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
                          <div class="input-group-append">
                            <button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
                          </div>
                        </div>
                    </form>
        </div>
        <div class="col-3 text-right">
          <div class="dropdown">
              <button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
              </button>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
              </div>
            </div>
        </div>


      </div>



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

I want the right aligned menu items (in the row) to be right next each other (like mr-1 spacing on each item) - but the col class adds spacing in between them in desktop mode. However when the window is smaller I want them to be in cols and nicely spaced out when you drop down the menu. I experimented with flex-rows but no matter what I tried I couldnt get it to work. I'm not sure that putting a row in the navbar was the right way to go. I'm still new to bootstrap4, so Im not really sure the best way to go about this is. Any help appreciated.

Ultimately, this is what I want my menus to look like, but I can't work out how to structure it with BootStrap 4:

In LG:

And XS screen size: (I couldnt get the Menu 1 to move completely to the right hand side, to align up with Dropdown)

I could do it easily in bootstrap3, but for some reason I'm struggling to get to grips with the way 4 works. It doesnt neccessarily have to be a navbar, if the above can be achieved with just rows and cols, I'd love to hear it.

回答1:

You could try adding push / pull as shown here https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex9&stacked=h That is one option. On your top row you can achieve the result a couple ways, one is to use offfset as shown below. The example uses the medium size, you will need to change it for your particular layout.

<div class="row row-fluid"> // row to be inside of a container
<div class="col-md-2">
Your burger-menu here
</div>
<div class="col-md-2 offset-md-8">
Your burger-menu here
</div>
</div>

Then start a new row for the login search dropdown but still in the same conatiner

<div class="row row-fluid">
<div class="col-md-2">
login code
</div>
<div class="col-md-8">
search code
</div>
<div class="col-md-2">
dropdown code
</div>
</div>

Obviously, as you would in Bootstrap 3, you need to set the columns to work for all different sizes. If the above does not work with your layout then try the push and pull methods to use your current configuration to move the divs into place.

来源：https://stackoverflow.com/questions/60625823/customizing-navbar