问题

这是我站点当前的外观：网站

现在，我正在尝试将登录和注册按钮与导航栏的其余部分放在同一行上。我在这里尝试了一些方法，但没有成功。尝试将文本端重新对齐到左侧，保持文本端的居中，并使用 （这当然会推动导航栏的其余部分，这不是我想要的）。我还尝试用</center>来关闭居中，但当然不起作用，因为它在div中使用了样式。我确实关闭了div，但结果就是我展示的截图。

我的HTML：

<!-- 导航栏 -->
<header class="p-3 text-bg-dark">
  <div class="container" style="display: flex; justify-content: center;">
    <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
      <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">主页</a></li>
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">API</a></li>
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">条款</a></li>
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">常见问题</a></li>
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">设置</a></li>
      </ul>
    </div>
  </div>
  <div class="text-end">
    {% if current_user.is_authenticated %}
    <a href="{{ url_for('accounts.logout') }}"><button type="button" class="btn btn-danger me-2" style="font-size: 16px !important;">注销</button></a>
    {% else %}
    <a href="{{ url_for('accounts.login') }}"><button type="button" class="btn btn-primary" style="font-size: 16px !important;">登录</button></a>
    &nbsp;
    &nbsp;
    <a href="{{ url_for('accounts.register') }}"><button type="button" class="btn btn-success" style="font-size: 16px !important;">注册</button></a>
    {% endif }
  </div>
</header>

我的Bootstrap base.html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SMS Simbi</title>
    <!-- 元标记 -->
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- 样式 -->
    <!-- 仅限CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="{{url_for('static', filename='styles.css')}}">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    {% block css %}{% endblock %}
  </head>
  <body>

    {% include "navigation.html" %}

    <div class="container">

      <br>

      <!-- 消息 -->
      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
          {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
           {{message}}
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}
        </div>
        <div class="col-md-4"></div>
      </div>
      {% endif %}
      {% endwith %}

      <!-- 子模板 -->
      {% block content %}{% endblock %}

    </div>

    <!-- 脚本 -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>
    <!-- JavaScript捆绑包与Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    {% block js %}{% endblock %}

  </body>
</html>

英文:

so this is what my site currently looks like: website

Now, I am trying to get the Login & Sign up buttons on the same line as the rest of the navigation bar. I tried a few things here with no success. Trying to realign text-end to the left, keeping the centering on text-end and using   (Which of course pushed the rest of the navi bar which is not what I want). And I also tried closing the center with </center> but of course that wouldn't work since it's using a style in the div. I did close the div, but the result is the screenshot I showed.

my html:

&lt;!-- Navigation --&gt;
&lt;header class=&quot;p-3 text-bg-dark&quot;&gt;
&lt;div class=&quot;container&quot; style=&quot;display: flex;justify-content: center;&quot;&gt;
&lt;div class=&quot;d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start&quot;&gt;
&lt;ul class=&quot;nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0&quot;&gt;
&lt;li&gt;&lt;a href=&quot;{{ url_for(&#39;core.home&#39;) }}&quot; class=&quot;nav-link&quot; style=&quot;color: #929292; font-size: 16px !important;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;{{ url_for(&#39;core.home&#39;) }}&quot; class=&quot;nav-link&quot; style=&quot;color: #929292; font-size: 16px !important;&quot;&gt;API&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;{{ url_for(&#39;core.home&#39;) }}&quot; class=&quot;nav-link&quot; style=&quot;color: #929292; font-size: 16px !important;&quot;&gt;Terms&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;{{ url_for(&#39;core.home&#39;) }}&quot; class=&quot;nav-link&quot; style=&quot;color: #929292; font-size: 16px !important;&quot;&gt;FAQ&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;{{ url_for(&#39;core.home&#39;) }}&quot; class=&quot;nav-link&quot; style=&quot;color: #929292; font-size: 16px !important;&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;text-end&quot;&gt;
{% if current_user.is_authenticated %}
&lt;a href=&quot;{{ url_for(&#39;accounts.logout&#39;) }}&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-danger me-2&quot; style=&quot;font-size: 16px !important;&quot;&gt;Logout&lt;/button&gt;&lt;/a&gt;
{% else %}
&lt;a href=&quot;{{ url_for(&#39;accounts.login&#39;) }}&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; style=&quot;font-size: 16px !important;&quot;&gt;Login&lt;/button&gt;&lt;/a&gt;
&amp;nbsp;
&amp;nbsp;
&lt;a href=&quot;{{ url_for(&#39;accounts.register&#39;) }}&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; style=&quot;font-size: 16px !important;&quot;&gt;Sign up&lt;/button&gt;&lt;/a&gt;
{% endif %}
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;

my bootstrap base.html file:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;SMS Simbi&lt;/title&gt;
&lt;!-- meta --&gt;
&lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
&lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
&lt;!-- styles --&gt;
&lt;!-- CSS only --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;{{url_for(&#39;static&#39;, filename=&quot;styles.css&quot;)}}&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot;&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css&quot;&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js&quot;&gt;&lt;/script&gt;
{% block css %}{% endblock %}
&lt;/head&gt;
&lt;body&gt;
{% include &quot;navigation.html&quot; %}
&lt;div class=&quot;container&quot;&gt;
&lt;br&gt;
&lt;!-- messages --&gt;
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-4&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
{% for category, message in messages %}
&lt;div class=&quot;alert alert-{{ category }} alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
{{message}}
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
{% endfor %}
&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
{% endif %}
{% endwith %}
&lt;!-- child template --&gt;
{% block content %}{% endblock %}
&lt;/div&gt;
&lt;!-- scripts --&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.6.1.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;!-- JavaScript Bundle with Popper --&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
{% block js %}{% endblock %}
&lt;/body&gt;
&lt;/html&gt;

答案1

得分: 0

以下是您要翻译的内容：

需要做的是将标题元素的高度设置为您想要的高度，我设置为10rem，并添加以下类：d-flex，justify-content-center和align-items-center：

<header class="p-3 text-bg-dark d-flex align-items-center justify-content-center" style="height: 10rem">...</header>

要使菜单居中，您可以将按钮设置为绝对定位，并为它们添加一个 'right'：

<div class="position-absolute" style="right: 1.25rem">
    {% if current_user.is_authenticated %}
    <a href="{{ url_for('accounts.logout') }}">
        <button type="button" class="btn btn-danger me-2" style="font-size: 16px !important">Logout</button>
    </a>
    {% else %}
    <a href="{{ url_for('accounts.login') }}">
        <button type="button" class="btn btn-primary" style="font-size: 16px !important">Login</button>
    </a>
    &nbsp; &nbsp;
    <a href="{{ url_for('accounts.register') }}">
        <button type="button" class="btn btn-success" style="font-size: 16px !important">Sign up</button>
    </a>
    {% endif %}
</div>

英文:

What you need to do is set the header element to the height you want, I put 10rem and add the classes: d-flex, justify-content-center and align-items-center:

&lt;header
class=&quot;p-3 text-bg-dark d-flex align-items-center justify-content-center&quot;
style=&quot;height: 10rem&quot;
&gt;...&lt;/header&gt;

To center the menu you can set the buttons to absolute and add a 'right' to them:

        &lt;div class=&quot;position-absolute&quot; style=&quot;right: 1.25rem&quot;&gt;
{% if current_user.is_authenticated %}
&lt;a href=&quot;{{ url_for(&#39;accounts.logout&#39;) }}&quot;
&gt;&lt;button
type=&quot;button&quot;
class=&quot;btn btn-danger me-2&quot;
style=&quot;font-size: 16px !important&quot;
&gt;
Logout
&lt;/button&gt;&lt;/a
&gt;
{% else %}
&lt;a href=&quot;{{ url_for(&#39;accounts.login&#39;) }}&quot;
&gt;&lt;button
type=&quot;button&quot;
class=&quot;btn btn-primary&quot;
style=&quot;font-size: 16px !important&quot;
&gt;
Login
&lt;/button&gt;&lt;/a
&gt;
&amp;nbsp; &amp;nbsp;
&lt;a href=&quot;{{ url_for(&#39;accounts.register&#39;) }}&quot;
&gt;&lt;button
type=&quot;button&quot;
class=&quot;btn btn-success&quot;
style=&quot;font-size: 16px !important&quot;
&gt;
Sign up
&lt;/button&gt;&lt;/a
&gt;
{% endif %}
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Flask HTML CSS Bootstrap 导航对齐问题

问题

答案1

nth-child在表格元素中不起作用。

如何使用Go发送文件数组？

背景图片的淡入淡出过渡效果 – 重叠问题

如何在背景变化时将文本颜色设置为黑色/白色以获得最大对比度？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论