Geek asks and answers

Click Bootstrap Button Group Elements to crop the screen.

I get part of a button dropdown from the page view.

enter image description here

I use the standard bootstrap code:

<div class="btn-group">
    <button class="btn btn-info">Log In</button>
    <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Log In with Facebook</a></li>
      <li class="divider"></li>
      <li><a href="#">Create New Account</a></li>
    </ul>
</div>

I have a similar problem at the bottom of the page, where I have another button, and then the drop-down part opens, it does not automatically configure itself, and I need to scroll down to view all the parameters.

Any suggestion?

+5
source share
2 answers

I think you are not positioning correctly .btn-group.

Put it in .navbar-inner-div and add a class .pull-right.

DEMO JSFIDDLE

<div class="navbar">
  <div class="navbar-inner">
      <a class="brand" href="#">Title</a>
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
       <div class="btn-group pull-right">
        <button class="btn btn-info">Log In</button>
        <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Log In with Facebook</a></li>
          <li class="divider"></li>
          <li><a href="#">Create New Account</a></li>
        </ul>
      </div>
  </div>
</div>
+15
source

You can do the following:

.dropdown-menu {
   left: -80px;
}

, , .

+4

More articles:


All Articles