css 引导导航导航栏链接有问题

bq9c1y66  于 2023-02-06  发布在  其他
关注(0)|答案(3)|浏览(272)

我有问题的引导导航栏链接时,它显示在小型设备上。这里是我的模板:

最后一项将显示在2行中

jchrr9hc

jchrr9hc1#

请先共享您的HTML代码,但您似乎没有考虑导航栏中的断点。要解决此问题,您可以在导航栏元素上使用 Bootstrap 类“navbar-expand-sm”或“navbar-expand-md”。取决于所需的断点。这将导致导航栏根据屏幕大小在展开和折叠状态之间切换。您还可以添加“navbar-nav”类应用于导航栏内的无序列表,以将列表项格式化为水平导航栏。

knpiaxh1

knpiaxh12#

下面是我的CSS:

header nav ul.navbar-nav {
    padding: 0 !important;
}

header nav ul.navbar-nav > li.menu-item {
    display: flex;
    margin: 0 0 0 40px;
    font-size: 20px;
}

header nav ul.navbar-nav > li.menu-item > a {
    display: inline-block;
    padding: 0 !important;
    color: #fff;
}

<div id="navbar" class="collapse navbar-collapse"><ul id="menu-menu-1" class="navbar-nav mr-auto"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-181" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-181 nav-item"><a title="گلفیلد" href="https://golfield.ir/" class="nav-link" aria-current="page">گلفیلد</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-183" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-183 nav-item"><span><img src="https://golfield.ir/wp-content/themes/golfield2/assets/images/icons/down.svg"></span><a title="محصولات" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-183">محصولات</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-183" role="menu">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-184" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-184 nav-item"><a title="باکس گل" href="https://golfield.ir/product-category/%d8%a8%d8%a7%da%a9%d8%b3-%da%af%d9%84/" class="dropdown-item">باکس گل</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-187" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-187 nav-item"><a title="دسته گل" href="https://golfield.ir/product-category/%d8%af%d8%b3%d8%aa%d9%87-%da%af%d9%84/" class="dropdown-item">دسته گل</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-189" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-189 nav-item"><a title="سبد گل" href="https://golfield.ir/product-category/%d8%b3%d8%a8%d8%af-%da%af%d9%84/" class="dropdown-item">سبد گل</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-188" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-188 nav-item"><a title="دیش گاردن" href="https://golfield.ir/product-category/%d8%af%db%8c%d8%b4-%da%af%d8%a7%d8%b1%d8%af%d9%86/" class="dropdown-item">دیش گاردن</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-186" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-186 nav-item"><a title="جام شیشه ای" href="https://golfield.ir/product-category/%d8%ac%d8%a7%d9%85-%d8%b4%db%8c%d8%b4%d9%87-%d8%a7%db%8c/" class="dropdown-item">جام شیشه ای</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-185" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-185 nav-item"><a title="تنگ شیشه ای" href="https://golfield.ir/product-category/%d8%aa%d9%86%da%af-%d8%b4%db%8c%d8%b4%d9%87-%d8%a7%db%8c-%da%af%d9%84/" class="dropdown-item">تنگ شیشه ای</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-404" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-404 nav-item"><a title="گل و شکلات" href="https://golfield.ir/product-category/%da%af%d9%84-%d9%88-%d8%b4%da%a9%d9%84%d8%a7%d8%aa/" class="dropdown-item">گل و شکلات</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-192" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-192 nav-item"><a title="گل و بادکنک" href="https://golfield.ir/product-category/%da%af%d9%84-%d9%88-%d8%a8%d8%a7%d8%af%da%a9%d9%86%da%a9/" class="dropdown-item">گل و بادکنک</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-194" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-194 nav-item"><a title="گل و عروسک" href="https://golfield.ir/product-category/%da%af%d9%84-%d9%88-%d8%b9%d8%b1%d9%88%d8%b3%da%a9/" class="dropdown-item">گل و عروسک</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-285" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-285 nav-item"><span><img src="https://golfield.ir/wp-content/themes/golfield2/assets/images/icons/down.svg"></span><a title="مناسبت ها" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-285">مناسبت ها</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-285" role="menu">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-278" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-278 nav-item"><a title="گل تولد" href="https://golfield.ir/product-category/%da%af%d9%84-%d8%aa%d9%88%d9%84%d8%af/" class="dropdown-item">گل تولد</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-279" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-279 nav-item"><a title="گل ترحیم" href="https://golfield.ir/product-category/%da%af%d9%84-%d8%aa%d8%b1%d8%ad%db%8c%d9%85/" class="dropdown-item">گل ترحیم</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-317" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-317 nav-item"><a title="گل نوزاد" href="https://golfield.ir/product-category/%da%af%d9%84-%d9%86%d9%88%d8%b2%d8%a7%d8%af/" class="dropdown-item">گل نوزاد</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-310" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-310 nav-item"><a title="گل روز مادر" href="https://golfield.ir/product-category/%da%af%d9%84-%d8%b1%d9%88%d8%b2-%d9%85%d8%a7%d8%af%d8%b1/" class="dropdown-item">گل روز مادر</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-309" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-309 nav-item"><a title="گل روز پدر" href="https://golfield.ir/product-category/%da%af%d9%84-%d8%b1%d9%88%d8%b2-%d9%be%d8%af%d8%b1/" class="dropdown-item">گل روز پدر</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-302" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-302 nav-item"><a title="گل شب یلدا" href="https://golfield.ir/product-category/%da%af%d9%84-%d8%b4%d8%a8-%db%8c%d9%84%d8%af%d8%a7/" class="dropdown-item">گل شب یلدا</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-303" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-303 nav-item"><a title="گل عید نوروز" href="https://golfield.ir/product-category/%da%af%d9%84-%d8%b9%db%8c%d8%af-%d9%86%d9%88%d8%b1%d9%88%d8%b2/" class="dropdown-item">گل عید نوروز</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-304" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-304 nav-item"><a title="گل کریسمس" href="https://golfield.ir/product-category/%da%af%d9%84-%da%a9%d8%b1%db%8c%d8%b3%d9%85%d8%b3/" class="dropdown-item">گل کریسمس</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-305" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-305 nav-item"><a title="گل هالووین" href="https://golfield.ir/product-category/%da%af%d9%84-%d9%87%d8%a7%d9%84%d9%88%d9%88%db%8c%d9%86/" class="dropdown-item">گل هالووین</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-308" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-308 nav-item"><a title="گل ولنتاین" href="https://golfield.ir/product-category/%da%af%d9%84-%d9%88%d9%84%d9%86%d8%aa%d8%a7%db%8c%d9%86/" class="dropdown-item">گل ولنتاین</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-182" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-182 nav-item"><a title="تماس با ما" href="https://golfield.ir/%d8%aa%d9%85%d8%a7%d8%b3-%d8%a8%d8%a7-%d9%85%d8%a7/" class="nav-link">تماس با ما</a></li>
</ul></div>
zpqajqem

zpqajqem3#

看起来不错,但问题可能来自菜单的父项,例如,如果导航栏的父div( Bootstrap 列)比导航栏小,就会发生这个问题。所以检查父项的宽度,并使用 Bootstrap 断点。例如,它在桌面大小的同一列上工作,你在移动的上也没有预料到。
最好使用断点列:

<div class="col-lg-4 col-sm-6">...</div>

而且你可以在较小的设备屏幕上处理它。
但如果这不是你的问题,你可以在你的导航栏中添加这种风格:

white-space: nowrap;

或者另一种解决方案可以是将其添加到li.menu-item class:

flex: 1;

但是你应该检查所有场景的影响和它们的结果。

相关问题