cssruby-on-railsbootstrap-4bootstrap-sass

Rails: Bootstrap sass, spacing between dropdown menu


I have installed bootstrap-sass gem on my app and I have two dropdown menus placed on the right side of the screen. Both of them are horizontally aligned but the two menus are too close to each other, so I would like to space them out a little bit. Also I would like to move them a bit down as well.

<div class="container">
     <div class="row">
      <div class="nav-collapse align-right">
        <div class="dropdown pull-right ">
        <a class="dropdown-toggle" data-toggle="dropdown" href="">
          Views
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li>....</li>
          <li>...</li>
        </ul>
      </div>

      <div class="dropdown pull-right">
        <a class="dropdown-toggle" data-toggle="dropdown" href="">
          Users
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li>....</li>
          <li>...</li>
        </ul>
      </div>

  <% end %>
   </div>
   </div>
  </div>

Solution

  • Use HTML space value before User. I mean

    &nbsp;Users
    

    Also you can do something like this for moving them down a bit

    div a{ padding-top: 1em; }