jquery - 防止 bootstrap 将图像推到导航栏中的下一行

我希望navbar将捐赠栏与nav选项显示在同一行上。同样，调整大小后，图像也会下降，如下所示。我尝试使用响应式img标记，但是它们不起作用。使用divs尝试使用列大小，仍然无法正常工作。

另外，还有一个额外的问题：如何将nav项与按钮对齐（如果您查看面包和捐赠按钮的位置略有偏移，则填充无效。）

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="news.html">News</a>
                </li>
                <li>
                    <a class="page-scroll" href="aboutus.html">About us</a>
                </li>
                <li>
                    <a class="page-scroll" href="team.html">Our Team</a>
                </li>

                <li>
                    <a class="page-scroll" href="volunteering.html">Volunteer</a>
                </li>

                <li>
                    <a class="page-scroll" href="contactus.html">Contact</a>
                </li>

                <li>

                <div class="dropdown">
                  <button onclick="location.href='donation.html'" class="dropbtn2" >Donate</button>
                  <div class="dropdown-content">
                    <a class="page-scroll" href="donation.html#section1">SET DONATION</a>
                    <a class="page-scroll" href="donation.html#section2">GIFT A DONATION</a>
                  </div>
                </div>

                </li>



            </ul>
            <a href="donation.html"><img class="alignright hidden-xs" src="icons/fundraisingbar.png"></a>




        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

CSS：

/* Dropdown BOX */

        /* Dropdown Button */
        .dropbtn {
            background-color: #F8F8F8;
            color: 777777;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropbtn2 {
            background-color: #F8F8F8;
            color: red;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }


        /* The container <div> - needed to position the dropdown content */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* Dropdown Content (Hidden by Default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        /* Links inside the dropdown */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {background-color: #f1f1f1}

        /* Show the dropdown menu on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* Change the background color of the dropdown button when the dropdown content is shown */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }

最佳答案

如何将div外部的按钮移到其自己的<li>中：

<!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="news.html">News</a>
                </li>
                <li>
                    <a class="page-scroll" href="aboutus.html">About us</a>
                </li>
                <li>
                    <a class="page-scroll" href="team.html">Our Team</a>
                </li>

                <li>
                    <a class="page-scroll" href="volunteering.html">Volunteer</a>
                </li>

                <li>
                    <a class="page-scroll" href="contactus.html">Contact</a>
                </li>
<li>
  <button onclick="location.href='donation.html'" class="dropbtn2" >Donate</button>
</li>
                <li>

                <div class="dropdown">

                  <div class="dropdown-content">
                    <a class="page-scroll" href="donation.html#section1">SET DONATION</a>
                    <a class="page-scroll" href="donation.html#section2">GIFT A DONATION</a>
                  </div>
                </div>

                </li>



            </ul>
            <a href="donation.html"><img class="alignright hidden-xs" src="icons/fundraisingbar.png"></a>




        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>