Question

我正在尝试将徽标和导航栏链接放在同一行。徽标在调整为移动设备时会自动显示。

这是它背后的HTML：

    <!-- header Area Start-->
    <div class="header-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-md-3 col-12">
                    <div class="logo">
                        <a href="index-2.html">
                            <img src="assets/img/logo.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="col-lg-10 text-right col-md-9 col-12">
                    <div class="responsive_menu"></div>
                    <div class="mainmenu-area">
                        <ul id="nav">
                            <li><a href="index-2.html">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="drop-menu">
                                    <li><a href="index-2.html">Rocket Home</a> </li>
                                    <li><a href="Gradient.html">Gradient Home</a> </li>
                                </ul>
                            </li>
                            <li><a href="domain.html">Domain</a></li>
                            <li><a href="hosting.html">Hosting <i class="fa fa-angle-down"></i></a>
                                <ul class="drop-menu">
                                    <li><a href="hosting.html">Hosting</a> </li>
                                    <li><a href="Team.html">Team</a> </li>
                                    <li><a href="about.html">About us</a></li>
                                    <li><a href="Testimonial.html">Testimonial</a></li>
                                    <li><a href="faq.html">FAQ</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Pages <i class="fa fa-angle-down"></i></a>
                                <ul class="drop-menu">
                                    <li><a href="Team.html">Team</a> </li>
                                    <li><a href="about.html">About us</a></li>
                                    <li><a href="Testimonial.html">Testimonial</a></li>
                                    <li><a href="faq.html">FAQ</a></li>
                                    <li><a href="service.html">Service</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="404.html">404 Page</a></li>
                                    <li><a href="coming-soon.html">Coming Soon</a></li>
                                </ul>
                            </li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="support.html">Support</a></li>
                        </ul>
                    </div>
                    <div class="search">
                        <span class="search-trigger"><i class="fa fa-search"></i></span>
                        <div class="search-box">
                            <form action="#">
                                <input type="text" name="s" placeholder="Search..">
                                <div class="submit-btn">
                                    <input type="submit" value="Go">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- header Area end-->

有什么建议可以让他们全部在一条线上吗？

Answer 1

引导程序中列的最大大小为12.默认情况下，Bootstrap会添加填充和边距，因此请尝试使用col-lg-8并查看会发生什么。

<div class="header-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-md-3">
                    <div class="logo">
                        <a href="index-2.html">
                            <img src="assets/img/logo.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="col-lg-8 text-right col-md-9">
                    <div class="responsive_menu"></div>
                    <div class="mainmenu-area">

徽标和导航栏链接在同一行

1 个答案: