使用Bootstrap 5和Vue将按钮对齐在导航栏中。

huangapple
go评论59阅读模式
英文:

Align button in a navbar with bootstrap5 and vue

问题

这是我的应用程序中视图的模板，我尝试创建一个简单的导航栏，但正如您所看到的，注册按钮与其他文本不对齐。我正在使用Bootstrap 5和Vue 3。

<template>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="/">
            <img src="../assets/logo.png" width="60" height="60" alt=".">
            <strong>Foodmate</strong>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto text-center">
                <li class="nav-item active">
                    <a class="nav-link" href="/about">Chi siamo</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/login">Accedi</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/signup">
                        <button type="button" class="btn btn-outline-success" id="registerButton">Registrati</button>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</template>

<style>
#registerButton{
    border-radius: 20px;
}
</style>

我尝试阅读文档，但无法找到解决方案。

英文:

this is the template of a view in my app,i am trying to do a simple navbar but as you can see the sign up button is non aligned with the rest of the text.What can i do?
I am using bootstrap5 and vue3.

&lt;template&gt;
    &lt;nav class=&quot;navbar navbar-expand-md navbar-light bg-light&quot;&gt;
    &lt;a class=&quot;navbar-brand&quot; href=&quot;/&quot;&gt;
        &lt;img src=&quot;../assets/logo.png&quot; width=&quot;60&quot; height=&quot;60&quot; alt=&quot;.&quot;&gt;
        &lt;strong&gt;Foodmate&lt;/strong&gt;
    &lt;/a&gt;
    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
        &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
            &lt;ul class=&quot;navbar-nav ms-auto text-center&quot;&gt;
            &lt;li class=&quot;nav-item active&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;/about&quot;&gt;Chi siamo&lt;/a&gt; 
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;/login&quot;&gt;Accedi&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;/signup&quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-success&quot; id=&quot;registerButton&quot;&gt;Registrati&lt;/button&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
&lt;/template&gt;

&lt;style&gt;
#registerButton{

    border-radius: 20px;
}

&lt;/style&gt;

使用Bootstrap 5和Vue将按钮对齐在导航栏中。

I've tried to read the documentation but i cannot find a solution.

答案1

得分: 0

只删除锚点标签内的按钮。你可以只使用 a，btn 类也适用于它：

&lt;a class=&quot;nav-link btn btn-outline-success&quot; href=&quot;/signup&quot; id=&quot;registerButton&quot;&gt;
  Registrati
&lt;/a&gt;

这是代码片段中的部分。

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #registerButton{

        border-radius: 20px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;

        &lt;nav class=&quot;navbar navbar-expand navbar-light bg-light&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;/&quot;&gt;
            &lt;strong&gt;Foodmate&lt;/strong&gt;
        &lt;/a&gt;
        &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
            &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
            &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
                &lt;ul class=&quot;navbar-nav ms-auto text-center&quot;&gt;
                &lt;li class=&quot;nav-item active&quot;&gt;
                    &lt;a class=&quot;nav-link&quot; href=&quot;/about&quot;&gt;Chi siamo&lt;/a&gt; 
                &lt;/li&gt;
                &lt;li class=&quot;nav-item&quot;&gt;
                    &lt;a class=&quot;nav-link&quot; href=&quot;/login&quot;&gt;Accedi&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;nav-item&quot;&gt;
                      Registrati
                &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/nav&gt;

&lt;!-- end snippet --&gt;
英文:

Just remove the button from inside the anchor tag. You can just use the a, the btn class works with it too:

&lt;a class=&quot;nav-link btn btn-outline-success&quot; href=&quot;/signup&quot; id=&quot;registerButton&quot;&gt;
  Registrati
&lt;/a&gt;

Here it is in the snippet.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

#registerButton{

    border-radius: 20px;
}

<!-- language: lang-html -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;nav class=&quot;navbar navbar-expand navbar-light bg-light&quot;&gt;
    &lt;a class=&quot;navbar-brand&quot; href=&quot;/&quot;&gt;
        &lt;strong&gt;Foodmate&lt;/strong&gt;
    &lt;/a&gt;
    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
        &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
            &lt;ul class=&quot;navbar-nav ms-auto text-center&quot;&gt;
            &lt;li class=&quot;nav-item active&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;/about&quot;&gt;Chi siamo&lt;/a&gt; 
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;/login&quot;&gt;Accedi&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link btn btn-outline-success&quot; href=&quot;/signup&quot; id=&quot;registerButton&quot;&gt;
                  Registrati
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/nav&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月16日 23:30:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76028659.html
  • bootstrap-5
  • vuejs3
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定