标题不正确定位

时间：2016-11-12 12:29:02

标签： html twitter-bootstrap

我想像这样制作标题2和标题3：

enter image description here

现在正处于＆＃34; kompetencer＆＃34;下面的菜单栏。看起来像这样：mySite

我试图在下面的代码中添加标题2和3，但是当我这样做时它们不是直线

<li class="dropdown mega-menu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Kompetencer</a>
    <ul class="dropdown-menu">
        <li>
            <div class="row">
                <div class="col-lg-8 col-md-9">
                    <h4 class="title">Design</h4>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="divider"></div>
                            <ul class="menu">
                                <li ><a href="page-about.html"><i class="fa fa-angle-right"></i>About Us 1</a></li>
                                <li ><a href="page-about-2.html"><i class="fa fa-angle-right"></i>About Us 2</a></li>
                                <li ><a href="page-about-3.html"><i class="fa fa-angle-right"></i>About Us 3</a></li>
                                <li ><a href="page-about-4.html"><i class="fa fa-angle-right"></i>About Us 4</a></li>
                                <li ><a href="page-about-me.html"><i class="fa fa-angle-right"></i>About Me</a></li>
                                <li ><a href="page-team.html"><i class="fa fa-angle-right"></i>Our Team - Options 1</a></li>
                                <li ><a href="page-team-2.html"><i class="fa fa-angle-right"></i>Our Team - Options 2</a></li>
                                <li ><a href="page-team-3.html"><i class="fa fa-angle-right"></i>Our Team - Options 3</a></li>
                                <li ><a href="page-coming-soon.html"><i class="fa fa-angle-right"></i>Coming Soon Page</a></li>

                            </ul>
                        </div>
                        <div class="col-sm-4">
                        <h4 class="title">HEADLINE 2</h4>
                            <div class="divider"></div>
                            <ul class="menu">
                                <li ><a href="kompetencer.php"><i class="fa fa-angle-right"></i>Kompetencer</a></li>
                                <li ><a href="page-contact.html"><i class="fa fa-angle-right"></i>Contact 1</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-4">
                        <h4 class="title">HEADLINE 3</h4>
                            <div class="divider"></div>
                            <ul class="menu">
                                <li ><a href="page-404.html"><i class="fa fa-angle-right"></i>404 error</a></li>
                                <li ><a href="page-404-2.html"><i class="fa fa-angle-right"></i>404 error - Parallax</a></li>
                                <li ><a href="page-affix-sidebar.html"><i class="fa fa-angle-right"></i>Sidebar - Affix Menu</a></li>
                                <li ><a href="page-left-sidebar.html"><i class="fa fa-angle-right"></i>Left Sidebar</a></li>
                                <li ><a href="page-right-sidebar.html"><i class="fa fa-angle-right"></i>Right Sidebar</a></li>
                                <li ><a href="page-two-sidebars.html"><i class="fa fa-angle-right"></i>Two Sidebars</a></li>
                                <li ><a href="page-two-sidebars-left.html"><i class="fa fa-angle-right"></i>Two Sidebars Left</a></li>
                                <li ><a href="page-two-sidebars-right.html"><i class="fa fa-angle-right"></i>Two Sidebars Right</a></li>
                                <li ><a href="page-no-sidebars.html"><i class="fa fa-angle-right"></i>No Sidebars</a></li>
                                <li ><a href="page-sitemap.html"><i class="fa fa-angle-right"></i>Sitemap</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-3 hidden-sm">
                    <h4 class="title">Premium HTML5 Template</h4>
                    <p class="mb-10">The Project is perfectly suitable for corporate, business and company webpages.</p>
                    <img src="images/section-image-3.png" alt="The Project">
                </div>
            </div>
        </li>
    </ul>
</li>

结果 Result

有人能看到这里出了什么问题吗？

1 个答案:

答案 0 :(得分：1)

您忘了在第一栏添加

<div class="col-sm-4">
<h4 class="title">HEADLINE 1</h4>
                            <div class="divider"></div>
                            <ul class="menu">
                                <li ><a href="page-about.html"><i class="fa fa-angle-right"></i>About Us 1</a></li>
                                <li ><a href="page-about-2.html"><i class="fa fa-angle-right"></i>About Us 2</a></li>
                                <li ><a href="page-about-3.html"><i class="fa fa-angle-right"></i>About Us 3</a></li>
                                <li ><a href="page-about-4.html"><i class="fa fa-angle-right"></i>About Us 4</a></li>
                                <li ><a href="page-about-me.html"><i class="fa fa-angle-right"></i>About Me</a></li>
                                <li ><a href="page-team.html"><i class="fa fa-angle-right"></i>Our Team - Options 1</a></li>
                                <li ><a href="page-team-2.html"><i class="fa fa-angle-right"></i>Our Team - Options 2</a></li>
                                <li ><a href="page-team-3.html"><i class="fa fa-angle-right"></i>Our Team - Options 3</a></li>
                                <li ><a href="page-coming-soon.html"><i class="fa fa-angle-right"></i>Coming Soon Page</a></li>

                            </ul>
                        </div>

因此，与其他人相比，它看起来很奇怪第一栏

编辑：删除

之上的设计类
相关问题
最新问题