Question

我设计了一个导航栏，其中有一些下拉菜单项都在垂直线上，如何将它们放在水平线上或并排放置？我的下拉菜单的代码。... 登录

                  Log In Via:
                  <div class="social-button">
                    <a href="#" class="btn btn-fb"><i class="fa fa-facebook"aria-hidden="true">Facebook</i></a>
                    <a href="#" class="btn btn-tw"><i class="fa fa-twitter" aria-hidden="true">Twitter</i></a>
                    <a href="#" class="btn btn-ins"><i class="fa fa-instagram" aria-hidden="true">Instagram</i></a>

                  </div>

              </div>
            </li>
          </ul>
        </li>

Answer 1

    <div class="social-button d-flex flex-row">
       <a href="#" class="btn btn-fb"><i class="fa fa-facebook"aria-hidden="true">Facebook</i></a>
       <a href="#" class="btn btn-tw"><i class="fa fa-twitter" aria-hidden="true">Twitter</i></a>
       <a href="#" class="btn btn-ins"><i class="fa fa-instagram" aria-hidden="true">Instagram</i></a>
    </div>

If you are using Bootstrap 4

Moreover, have a look to flex, it's really important :) https://getbootstrap.com/docs/4.1/utilities/flex/

如何水平下拉菜单项而不是垂直窗体

1 个答案: