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

Question

我希望 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;
        }

Answer 1

如何将 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>