Flask HTML CSS Bootstrap 导航对齐问题

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

Flask HTML CSS Bootstrap Navigation Alignment issue

问题

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

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

我的HTML：

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

我的Bootstrap base.html文件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>SMS Simbi</title>
  6.     <!-- 元标记 -->
  7.     <meta name="description" content="">
  8.     <meta name="author" content="">
  9.     <meta name="viewport" content="width=device-width,initial-scale=1">
  10.     <!-- 样式 -->
  11.     <!-- 仅限CSS -->
  12.     <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">
  13.     <link rel="stylesheet" href="{{url_for('static', filename='styles.css')}}">
  14.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  15.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  16.     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  17.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
  18.     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
  19.     {% block css %}{% endblock %}
  20.   </head>
  21.   <body>
  23.     {% include "navigation.html" %}
  25.     <div class="container">
  27.       <br>
  29.       <!-- 消息 -->
  30.       {% with messages = get_flashed_messages(with_categories=true) %}
  31.       {% if messages %}
  32.       <div class="row">
  33.         <div class="col-md-4"></div>
  34.         <div class="col-md-4">
  35.           {% for category, message in messages %}
  36.           <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
  37.            {{message}}
  38.            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  39.           </div>
  40.           {% endfor %}
  41.         </div>
  42.         <div class="col-md-4"></div>
  43.       </div>
  44.       {% endif %}
  45.       {% endwith %}
  47.       <!-- 子模板 -->
  48.       {% block content %}{% endblock %}
  50.     </div>
  52.     <!-- 脚本 -->
  53.     <script src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>
  54.     <!-- JavaScript捆绑包与Popper -->
  55.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  56.     {% block js %}{% endblock %}
  58.   </body>
  59. </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 &nbsp; (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:

  1. &lt;!-- Navigation --&gt;
  2. &lt;header class=&quot;p-3 text-bg-dark&quot;&gt;
  3. &lt;div class=&quot;container&quot; style=&quot;display: flex;justify-content: center;&quot;&gt;
  4. &lt;div class=&quot;d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start&quot;&gt;
  5. &lt;ul class=&quot;nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0&quot;&gt;
  6. &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;
  7. &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;
  8. &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;
  9. &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;
  10. &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;
  11. &lt;/ul&gt;
  12. &lt;/div&gt;
  13. &lt;/div&gt;
  14. &lt;div class=&quot;text-end&quot;&gt;
  15. {% if current_user.is_authenticated %}
  16. &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;
  17. {% else %}
  18. &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;
  19. &amp;nbsp;
  20. &amp;nbsp;
  21. &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;
  22. {% endif %}
  23. &lt;/div&gt;
  24. &lt;/div&gt;
  25. &lt;/div&gt;
  26. &lt;/header&gt;

my bootstrap base.html file:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;utf-8&quot;&gt;
  5. &lt;title&gt;SMS Simbi&lt;/title&gt;
  6. &lt;!-- meta --&gt;
  7. &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
  8. &lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;
  9. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
  10. &lt;!-- styles --&gt;
  11. &lt;!-- CSS only --&gt;
  12. &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;
  13. &lt;link rel=&quot;stylesheet&quot; href=&quot;{{url_for(&#39;static&#39;, filename=&quot;styles.css&quot;)}}&quot;&gt;
  14. &lt;link rel=&quot;stylesheet&quot; href=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot;&gt;
  15. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  16. &lt;script src=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  17. &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;
  18. &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;
  19. {% block css %}{% endblock %}
  20. &lt;/head&gt;
  21. &lt;body&gt;
  22. {% include &quot;navigation.html&quot; %}
  23. &lt;div class=&quot;container&quot;&gt;
  24. &lt;br&gt;
  25. &lt;!-- messages --&gt;
  26. {% with messages = get_flashed_messages(with_categories=true) %}
  27. {% if messages %}
  28. &lt;div class=&quot;row&quot;&gt;
  29. &lt;div class=&quot;col-md-4&quot;&gt;&lt;/div&gt;
  30. &lt;div class=&quot;col-md-4&quot;&gt;
  31. {% for category, message in messages %}
  32. &lt;div class=&quot;alert alert-{{ category }} alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
  33. {{message}}
  34. &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;
  35. &lt;/div&gt;
  36. {% endfor %}
  37. &lt;/div&gt;
  38. &lt;div class=&quot;col-md-4&quot;&gt;&lt;/div&gt;
  39. &lt;/div&gt;
  40. {% endif %}
  41. {% endwith %}
  42. &lt;!-- child template --&gt;
  43. {% block content %}{% endblock %}
  44. &lt;/div&gt;
  45. &lt;!-- scripts --&gt;
  46. &lt;script src=&quot;https://code.jquery.com/jquery-3.6.1.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  47. &lt;!-- JavaScript Bundle with Popper --&gt;
  48. &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;
  49. {% block js %}{% endblock %}
  50. &lt;/body&gt;
  51. &lt;/html&gt;

答案1

得分: 0

以下是您要翻译的内容：

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

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

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

  1. <div class="position-absolute" style="right: 1.25rem">
  2.     {% if current_user.is_authenticated %}
  3.     <a href="{{ url_for('accounts.logout') }}">
  4.         <button type="button" class="btn btn-danger me-2" style="font-size: 16px !important">Logout</button>
  5.     </a>
  6.     {% else %}
  7.     <a href="{{ url_for('accounts.login') }}">
  8.         <button type="button" class="btn btn-primary" style="font-size: 16px !important">Login</button>
  9.     </a>
  10.     &nbsp; &nbsp;
  11.     <a href="{{ url_for('accounts.register') }}">
  12.         <button type="button" class="btn btn-success" style="font-size: 16px !important">Sign up</button>
  13.     </a>
  14.     {% endif %}
  15. </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:

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

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

  1.         &lt;div class=&quot;position-absolute&quot; style=&quot;right: 1.25rem&quot;&gt;
  2. {% if current_user.is_authenticated %}
  3. &lt;a href=&quot;{{ url_for(&#39;accounts.logout&#39;) }}&quot;
  4. &gt;&lt;button
  5. type=&quot;button&quot;
  6. class=&quot;btn btn-danger me-2&quot;
  7. style=&quot;font-size: 16px !important&quot;
  8. &gt;
  9. Logout
  10. &lt;/button&gt;&lt;/a
  11. &gt;
  12. {% else %}
  13. &lt;a href=&quot;{{ url_for(&#39;accounts.login&#39;) }}&quot;
  14. &gt;&lt;button
  15. type=&quot;button&quot;
  16. class=&quot;btn btn-primary&quot;
  17. style=&quot;font-size: 16px !important&quot;
  18. &gt;
  19. Login
  20. &lt;/button&gt;&lt;/a
  21. &gt;
  22. &amp;nbsp; &amp;nbsp;
  23. &lt;a href=&quot;{{ url_for(&#39;accounts.register&#39;) }}&quot;
  24. &gt;&lt;button
  25. type=&quot;button&quot;
  26. class=&quot;btn btn-success&quot;
  27. style=&quot;font-size: 16px !important&quot;
  28. &gt;
  29. Sign up
  30. &lt;/button&gt;&lt;/a
  31. &gt;
  32. {% endif %}
  33. &lt;/div&gt;

huangapple
  • 本文由 发表于 2023年6月12日 00:19:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76451388.html
  • css
  • flask
  • html
匿名

发表评论

匿名网友

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

确定