javascript - 更新到 Bootstrap 3.2.0 - 导航标题对齐之后变得不对齐-6ren

javascript - 更新到 Bootstrap 3.2.0 - 导航标题对齐之后变得不对齐

转载作者：行者123 更新时间：2023-11-28 10:08:48

标题更新后的样子: http://i.imgur.com/FpKu9Nm.png

这是我的 jsFiddle: http://jsfiddle.net/SkLy7/1/

fiddle 包含 CSS 和 JS 的外部资源。

不确定如何修复。有任何想法吗？

我的导航的 HTML 是:

<header>
    <div class="headerstrip navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                <a href="//rsatestamle.dminsite.com/" class="logo pull-left"><img src="http://cdnll.amleo.com/images/art/AMLLogo.png" art="ART" width="613" height="41" alt="AML Logo" class="img-responsive"></a>
                    <div id="TopNavigationControls">                        
                            <div id="topnav">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    </button>

                                    <ul class="nav navbar-nav">
                                            <li style="line-height: 20px;"><a class="AMLPhone" href="tel:1-800-543-8955" title="Phone">1-800-543-8955</a>
                                            </li>
                                            <li style="line-height: 20px;"><a class="home" href=" //rsatestamle.dminsite.com/" title="Home">Home</a>
                                            </li>
                                            <li style="line-height: 20px;"><a class="myaccount" href="//rsatestamle.dminsite.com/Login.aspx" title="Login">Login</a>
                                            </li>
                                            <li style="line-height: 20px;"><a class="shoppingcart" href="//rsatestamle.dminsite.com/cart.aspx" title="Cart">Cart</a>
                                            </li>
                                            <div class="HiringLink"><a class="NowHiring" href="/careers/a/66/" title="Now Hiring!">Now Hiring!</a></div>
                                    </ul>

                                    <!-- Collect the nav links, forms, and other content for toggling -->
                                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                      <ul class="nav navbar-nav">                                                                       
                                        <li><a href="/CategoryList.aspx">Categories</a></li>            
                                        <li><a href="/company-information/a/1/">About Us</a></li>        
                                        <li><a href="/catalogs.aspx">Request a Catalog</a></li>                                           
                                        <li><a href="https://www.youtube.com/user/leonard1885">Videos</a></li>
                                        <li><a href="/CustomerService.aspx">Help</a></li>
                                        <li><a href="/email-deals/a/25/">Email Deals</a></li>
                                        <li><a href="/emaildeals/a/47_2/">Subscribe</a></li>
                                      </ul>
                                    </div><!-- /.navbar-collapse -->

                                </div>
                            </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container White_BG">
        <div class="headerdetails hidden-print">
            <div class="pull-left">
                <form class="form-search top-search" action="Search.aspx" onsubmit="return validateSearch(this);" method="GET">
                <input type="text" class="input-medium search-query yui-ac-input" name="ss" id="ss" placeholder="Search and find it fast" title="Search and find it fast" onblur="if (this.value == '') { this.value = 'Search and find it fast'; }" onfocus="if ((this.value == 'Search and find it fast')||(this.value == 'Search and find it fast')) { this.value = ''; }" onkeypress="if ((this.value == 'Please enter a keyword or item #')||(this.value == 'Search and find it fast')) { this.value = ''; } else{ document.getElementsByName('ss')[0].style.color='black'; }" autocomplete="off">
                <input type="submit" title="Search" class="btn btn-orange SearchButton" value="Search">
                </form>
            </div>

            <div class="pull-right">
                <div id="floating-cart-link">
                    <ul class="nav topcart pull-left">
                        <li id="floating-list" class="carticon cart">
                        <a href=" //rsatestamle.dminsite.com/cart.aspx" class="cart-tools-total" title="Shopping Cart"> Shopping Cart <span class="label label-orange font14" id="cartItemsNumber">0 item(s)</span> - <span id="itemsTotalCost">$0.00</span> <b class="caret"></b></a>
                        <ul class="dropdown-menu topcartopen">
                        <li></li>
                        </ul>
                        </li>
                    </ul>
                </div>

                <div id="cart-items-open" style="display: none;"></div> 
            </div>
        </div>


<div id="categorymenu">
    <nav class="subnav">
        <ul id="nav" class="nav-pills categorymenu">
            <li><a href=" //rsatestamle.dminsite.com/CategoryList.aspx" title="Categories">Categories <i class="glyphicon glyphicon-chevron-down icon-white"></i></a>
                <div>

<ul id="nav">
    <li> <a href="http://rsatestamle.dminsite.com/am-leonard-brand-tools/c/10000000/">
            A.M. Leonard
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/arborist-supplies-ropes-saddles-spurs-tree-support/c/P13/">
            Arborist Supplies
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/container-production-pots-root-pouches-supports-weed-control-soilless-mix-wondersoil/c/P04/">
            Container Production
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/greenhouse-production-hydroponics-frost-protection-shade-fabric-pots-trays-baskets/c/P05/">
            Greenhouse Production
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/hand-tools/c/P01/">
            Hand Tools
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/field-production/c/P03/">
            Field Production
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/fertilizers-and-treatments/c/P15/">
            Fertilizers &amp; Treatments
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/herbicide-insecticide-fungicide/c/P16/">
            Herbicides, Insecticides, Fungicides
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/landscape-and-turf-management/c/P14/">
            Turf, Landscape Management
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/maintenance-supplies/c/P19/">
            Maintenance Supplies
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/marking-tagging/c/P12/">
            Marking &amp; Tagging
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/material-handling/c/P11/">
            Material Handling
        </a>
    </li></ul>
<ul id="nav">
    <li> <a href="http://rsatestamle.dminsite.com/measuring-surveying-testing/c/P02/">
            Measuring, Surveying, Testing
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/pest-control/c/P18/">
            Pest Control
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/power-equipment/c/P08/">
            Power Equipment
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/pruning/c/P10/">
            Pruning
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/safety/c/P07/">
            Safety
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/snow-and-winter/c/P20/">
            Snow &amp; Winter
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/sprayers%2c-spreaders-and-applicators/c/P17/">
            Sprayers, Spreaders and Applicators
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/watering-and-irrigation/c/P06/">
            Watering &amp; Irrigation
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/work-wear/c/P09/">
            Work Wear
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/clearance/c/123456789/">
            Clearance
        </a>
    </li>
    <li> <a href="http://rsatestamle.dminsite.com/made-in-the-u+s+a/c/USA_2012/">
            Made in the USA
        </a>
    </li></ul></div>
            </li>
            <li><a href=" //rsatestamle.dminsite.com/brands.aspx" title="Brands">Brands <i class="glyphicon glyphicon-chevron-down icon-white"></i></a>
                <div>
                    <ul><li><a href="http://rsatestamle.dminsite.com/am-leonard-brand-tools/c/10000000/">A.M. Leonard</a></li><li><a href="http://rsatestamle.dminsite.com/ames-true-temper/c/BR_1001_13/">Ames True Temper</a></li><li><a href="http://rsatestamle.dminsite.com/ars/c/BR_1001_20/">ARS</a></li><li><a href="http://rsatestamle.dminsite.com/bahco/c/BR_1001_24/">Bahco</a></li><li><a href="http://rsatestamle.dminsite.com/corona/c/BR_1001_59/">Corona</a></li><li><a href="http://rsatestamle.dminsite.com/felco/c/BR_1001_92/">Felco</a></li><li><a href="http://rsatestamle.dminsite.com/florikan/c/BR_1001_452/">Florikan</a></li><li><a href="http://rsatestamle.dminsite.com/ginegar-poly-film/c/BR_1001_530/">Ginegar Poly Film</a></li><li><a href="http://rsatestamle.dminsite.com/haviland-plastic/c/BR_1001_438/">Haviland Plastic</a></li><li><a href="http://rsatestamle.dminsite.com/king-of-spades/c/BR_1001_315/">King of Spades</a></li><li><a href="http://rsatestamle.dminsite.com/permaloc/c/BR_1001_397/">Permaloc</a></li><li><a href="http://rsatestamle.dminsite.com/plant-health-care/c/BR_1001_405/">Plant Health Care</a></li><li><a href="http://rsatestamle.dminsite.com/silky/c/BR_1001_419/">Silky</a></li><li><a href="http://rsatestamle.dminsite.com/solo/c/BR_1001_247/">Solo</a></li><li><a href="http://rsatestamle.dminsite.com/treegator/c/BR_1001_284/">Treegator</a></li><li class="BrandsNavDropdown"><a href="//rsatestamle.dminsite.com/brands.aspx">All Brands...</a></li></ul>
                </div>
            </li>
            <li>
<a href=" http://rsatestamle.dminsite.com/new/c/P_NEW/" title="New Products">New</a>
            </li>
            <li>
                <a href=" http://rsatestamle.dminsite.com/clearance/c/123456789/" title="Clearance">Clearance <i class="glyphicon glyphicon-chevron-down icon-white"></i></a>
                <div>
                    <ul id="nav">
                        <li> 
                            <a href="http://iteminfo.amleo.com/poly/" target="_blank">Poly Remnant Sale</a>
                        </li>
                        <li>
                            <a href="/clearance/c/123456789/">Clearance Items</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
<a href=" //rsatestamle.dminsite.com/am-leonard-quick-how-to-guides/a/1001/" title="Our How-To Guides Are a Great Reference to Help You Work Smarter!">Guides</a>
            </li>
            <li>
<a href=" //rsatestamle.dminsite.com/CustomerService.aspx" title="Customer Service">Customer Care</a>
            </li>
            <li>
<a href=" //rsatestamle.dminsite.com/email-deals/a/25/" title="Email Deals">Email Deals</a>
            </li>
            <li>
<a href=" //rsatestamle.dminsite.com/catalogs.aspx" title="Catalogs">Catalog</a>
            </li>
            <li>
<a href=" //rsatestamle.dminsite.com/quickorder.aspx">Quick Order</a>
            </li>
        </ul>
    </nav>
</div>
    </div>
</header>

最佳答案

让你回到正轨。这是 JSFiddle .

但是还有很多工作要做。 Bootstrap 3 改变了很多类术语。

而且您正在使用很多 <ul>和 <li>需要转换为 <div> 的标签让您的下拉菜单正常工作。

我尝试提供大量 HTML 注释来帮助您。

这将是一个非常耗时的元素。

您可能决定恢复到 Bootstrap 2 并坚持使用您的原始 HTML 文件。

但是在我的帮助下得出了我的大意见。随意忽略。

我希望此 HTML 是由某种 UI(例如 Wordpress)生成的，因为它一团糟(希望这不会令人反感)。

我花了大部分时间来修复缩进，以便代码可读。

如果您不熟悉 HTML、CSS 和 Bootstrap，我建议您花一些时间浏览一些教程网站，以便更加熟悉。我认为如果不充分了解这三者，您将难以调整其余的更新。

关于javascript - 更新到 Bootstrap 3.2.0 - 导航标题对齐之后变得不对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24455628/

文章推荐： swift - 如何从 GameViewController 更新 SKScene 中的变量？

文章推荐： CSS:在不使用位置的情况下独立于 parent 定位 child :绝对

文章推荐： ios - 为什么当 ActiveReferenceCount > 0 时对象被取消初始化

文章推荐： ios - 类不覆盖 Storyboard

c - 在 getch() 之后，即使在输入 1-6 之后，程序也会忽略 if。
我的代码有问题。它总是忽略if(userDigit=1).. 谁能告诉我这里出了什么问题？ for(i=0; i=1) { //
javascript - 即使在使用 $(document).ready(function() {}) 之后，jquery click 函数也无法正常工作；甚至在使用 $(function) block 之后
我正在尝试从字符串 html_doc 中提取 id=obj1 并尝试将 onclick 函数附加到它 document.addEventListener("DOMContentLoaded", fu
CSS动画从一个类到另一个类的变化::之后
我正在尝试使用 css 动画来动画化从一个类到另一个类的变化。基本思想是在用户单击按钮时为从一个边缘滑动到另一个边缘的 slider 设置动画。到目前为止我的代码。 https://jsfiddle
css - 背景颜色过渡和不透明度过渡同步问题之前/之后
我目前面临使用前后伪元素淡入导航项的问题。当我悬停导航项时，它必须将其背景颜色从白色更改为蓝色。没什么疯狂的。但它也必须显示两个背景图像，分别通过将::before 伪元素从 0 更改为 1 和::
sql - SQLite3和Alter表..之后
有没有简单的方法可以在最近的sqlite版本中修改表，使其与预定义的架构匹配？架构： war_id INTEGER NOT NULL, clanname VARCHAR(64), clanhomep
PHP 搜索获取文本之前/之后
我该如何将我的搜索结果变成这样的: http://i.stack.imgur.com/NfPGs.png 结果显示特定术语在单元格中的位置。我目前有这个基本的搜索脚本: $terms =
javascript - 追加后隐藏输入(之后)
我正在尝试使用按钮创建输入字段。但我想要的是，当创建输入字段时，我想用相同的按钮隐藏创建的输入字段。我尝试了 slideToggle 函数，但效果不是很好。 $('#addEmail').one('
ios - iOS工具之前/之后
我想做这样的事情: Reference of image. 我所做的:两个 UIImagesView，一个带有 UIViewContentModeLeft，另一个带有 UIViewContentMod
mysql - 使用自动增量字段插入触发器之前/之后
我在使用应该修复表中列的插入触发器时遇到了问题: id - auto increment int thread_id - int [NULL] 我想要实现的是将 thread_id 设置
Python tkinter 之后
我使用 tinter.after() 每 200 毫秒刷新一次树莓派上模拟时钟的显示。一开始还可以，但逐渐地，每次刷新之间的时间达到大约 2-3 秒。是否有任何解决方案可以将刷新间隔保持在 200m
html - 如何从右到左为元素宽度设置动画::之后？
我有一个按钮，它使用::after 伪来填充背景。目前它从左到右填充，这在宽度从 0 到 100% 时有意义。但是，我希望它翻转它填充的方式。 a.project--link { margin:
html - 嵌入跨度和伪元素的问题:之后
我正在尝试添加带有伪元素:after的下划线来注释一些文本。我的问题是，我想强调下划线。在此示例中，这是短语“实际上确实可以...”和“ ...不起作用”。 .test { margin-top
css - 使元素出现在上一个文本之前/之后？
鉴于此: This is a test It is 有没有我可以应用到的 CSS？那它会出现在“This is...”之前，并且在 PREVIOUS LINE 之前吗？ float:left; d
css - 伪元素之前/之后
我正在使用链接左侧的图像。现在，我使用图像的::before 属性来显示，但它显示在链接的上方。我需要对齐它。这是一张照片: Link 我使用的代码是: .vocabulary-duration
css-之后。如何隐藏最后一个伪元素
我有一个页脚有与 6 body {background:#bbb;} .main-footer a::after { content: " | "; color: white; mar
css - 如何更改子元素的::之后
我有一个父元素和一些子元素，但我不能直接更改它们的 CSS。所以，我试图在父元素的 CSS 中更改我 child 的 CSS。示例: .parent { & .child {
CSS:带有标题的内容之前/之后
我可以 div:after { content: "hello" } 但我能否为 hello 文本添加标题，以便当我用鼠标悬停它时显示标题？谢谢最佳答案你不需要伪元素: p { ba
css - :之后与::之后
CSS 2.1 :after 和 CSS 3 ::after 伪选择器(除了 ::after 旧浏览器不支持)？是否有任何实际理由使用更新的规范？最佳答案这是伪类与伪元素的区别。除了 ::fir
我花了千把块给家里装上了“智能家居”之后
「掏出钥匙开门，然后在黑暗中摸索着墙壁开关的位置，最后将室内的灯点亮。」这是一个星期之前，我每天晚上下班回家时的固定戏码，也可能是大部分人每天回家时的经历。这种「一对一」的日常琐碎还有许多许
jquery - 使用 .before();之后();包裹元素
我正在尝试包装 , ，和具有的元素修复我无法直接编辑的表单上的某些定位。由于某种原因，当我尝试使用以下代码时: $("label").before(""); $("input[type=tex

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 更新到 Bootstrap 3.2.0 - 导航标题对齐之后变得不对齐