增加导航栏品牌的大小

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

increase size of navbar-brand

问题

我正在构建一个落地页，但我的标志看起来很小，我正在使用Bootstrap 5。

style.css

  1. ...
  2. .navbar-brand {
  3.   width: 3.5rem;
  4.   padding: 0 0;
  5.   margin: 0.3rem 0;
  6.   position: relative;
  7. }
  9. .navbar-brand img {
  10.   width: 100%;
  11.   height: auto;
  12. }
  14. body .navbar-brand .logo-dark {
  15.   display: none;
  16. }
  18. body.dark-layout .navbar-brand .logo-light {
  19.   display: none;
  20. }
  22. body.dark-layout .navbar-brand .logo-dark {
  23.   display: block;
  24. }
  26. @media (min-width: 576px) {
  27.   .navbar-expand-sm .navbar-brand {
  28.     width: 4.5rem;
  29.   }
  31.   .navbar-expand-sm.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  32.     transform: translateY(-100%);
  33.   }
  35.   .navbar-expand-sm .nav-item {
  36.     height: 4.5rem;
  37.     display: flex;
  38.     align-items: center;
  39.   }
  41.   .navbar-expand-sm .nav-item:not(:first-child) {
  42.     margin-left: 1.25rem;
  43.   }
  44. }
  46. @media (min-width: 768px) {
  47.   .navbar-expand-md .navbar-brand {
  48.     width: 4.5rem;
  49.   }
  51.   .navbar-expand-md.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  52.     transform: translateY(-100%);
  53.   }
  55.   .navbar-expand-md .nav-item {
  56.     height: 4.5rem;
  57.     display: flex;
  58.     align-items: center;
  59.   }
  61.   .navbar-expand-md .nav-item:not(:first-child) {
  62.     margin-left: 1.25rem;
  63.   }
  64. }
  66. @media (min-width: 992px) {
  67.   .navbar-expand-lg .navbar-brand {
  68.     width: 4.5rem;
  69.   }
  71.   .navbar-expand-lg.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  72.     transform: translateY(-100%);
  73.   }
  75.   .navbar-expand-lg .nav-item {
  76.     height: 4.5rem;
  77.     display: flex;
  78.     align-items: center;
  79.   }
  81.   .navbar-expand-lg .nav-item:not(:first-child) {
  82.     margin-left: 1.25rem;
  83.   }
  84. }
  86. @media (min-width: 1200px) {
  87.   .navbar-expand-xl .navbar-brand {
  88.     width: 4.5rem;
  89.   }
  91.   .navbar-expand-xl.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  92.     transform: translateY(-100%);
  93.   }
  95.   .navbar-expand-xl .nav-item {
  96.     height: 4.5rem;
  97.     display: flex;
  98.     align-items: center;
  99.   }
  101.   .navbar-expand-xl .nav-item:not(:first-child) {
  102.     margin-left: 1.25rem;
  103.   }
  104. }
  106. @media (min-width: 1400px) {
  107.   .navbar-expand-xxl .navbar-brand {
  108.     width: 4.5rem;
  109.   }
  111.   .navbar-expand-xxl.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  112.     transform: translateY(-100%);
  113.   }
  115.   .navbar-expand-xxl .nav-item {
  116.     height: 4.5rem;
  117.     display: flex;
  118.     align-items: center;
  119.   }
  121.   .navbar-expand-xxl .nav-item:not(:first-child) {
  122.     margin-left: 1.25rem;
  123.   }
  124. }
  126. .navbar-expand .navbar-brand {
  127.   width: 4.5rem;
  128. }
  129. ...

这是我的HTML文件

  1. <body>
  2.   <nav class="navbar navbar-expand-lg navbar-transparent navbar-sticky navbar-light">
  3.     <div class="container-fluid px-xl-0 mx-xl-5">
  4.       <a class="navbar-brand" href="index.html">
  5.         <img src="{{ url_for('static', filename='images/logo-no-background.svg') }}" alt="" class="">
  6.       </a>
  7.       ...
  8.     </div>
  9.   </nav>
  10.   ...
  11. </body>

希望这些信息对你有所帮助。

英文:

I'm building a landing page but my logo is looking very small and i~m using bootstrap 5

style.css

  1. ...
  2. .navbar-brand {
  3. width: 3.5rem;
  4. padding: 0 0;
  5. margin: 0.3rem 0;
  6. position: relative;
  7. }
  8. .navbar-brand img {
  9. width: 100%;
  10. height: auto;
  11. }
  12. body .navbar-brand .logo-dark {
  13. display: none;
  14. }
  15. body.dark-layout .navbar-brand .logo-light {
  16. display: none;
  17. }
  18. body.dark-layout .navbar-brand .logo-dark {
  19. display: block;
  20. }
  21. @media (min-width: 576px) {
  22. .navbar-expand-sm .navbar-brand {
  23. width: 4.5rem;
  24. }
  25. .navbar-expand-sm.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  26. transform: translateY(-100%);
  27. }
  28. .navbar-expand-sm .nav-item {
  29. height: 4.5rem;
  30. display: flex;
  31. align-items: center;
  32. }
  33. .navbar-expand-sm .nav-item:not(:first-child) {
  34. margin-left: 1.25rem;
  35. }
  36. }
  37. @media (min-width: 768px) {
  38. .navbar-expand-md .navbar-brand {
  39. width: 4.5rem;
  40. }
  41. .navbar-expand-md.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  42. transform: translateY(-100%);
  43. }
  44. .navbar-expand-md .nav-item {
  45. height: 4.5rem;
  46. display: flex;
  47. align-items: center;
  48. }
  49. .navbar-expand-md .nav-item:not(:first-child) {
  50. margin-left: 1.25rem;
  51. }
  52. }
  53. @media (min-width: 992px) {
  54. .navbar-expand-lg .navbar-brand {
  55. width: 4.5rem;
  56. }
  57. .navbar-expand-lg.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  58. transform: translateY(-100%);
  59. }
  60. .navbar-expand-lg .nav-item {
  61. height: 4.5rem;
  62. display: flex;
  63. align-items: center;
  64. }
  65. .navbar-expand-lg .nav-item:not(:first-child) {
  66. margin-left: 1.25rem;
  67. }
  68. }
  69. @media (min-width: 1200px) {
  70. .navbar-expand-xl .navbar-brand {
  71. width: 4.5rem;
  72. }
  73. .navbar-expand-xl.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  74. transform: translateY(-100%);
  75. }
  76. .navbar-expand-xl .nav-item {
  77. height: 4.5rem;
  78. display: flex;
  79. align-items: center;
  80. }
  81. .navbar-expand-xl .nav-item:not(:first-child) {
  82. margin-left: 1.25rem;
  83. }
  84. }
  85. @media (min-width: 1400px) {
  86. .navbar-expand-xxl .navbar-brand {
  87. width: 4.5rem;
  88. }
  89. .navbar-expand-xxl.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
  90. transform: translateY(-100%);
  91. }
  92. .navbar-expand-xxl .nav-item {
  93. height: 4.5rem;
  94. display: flex;
  95. align-items: center;
  96. }
  97. .navbar-expand-xxl .nav-item:not(:first-child) {
  98. margin-left: 1.25rem;
  99. }
  100. }
  101. .navbar-expand .navbar-brand {
  102. width: 4.5rem;
  103. }
  104. ...

This is my html file

  1. [![...
  2. &lt;body&gt;
  3. &lt;nav class=&quot;navbar navbar-expand-lg navbar-transparent navbar-sticky navbar-light&quot;&gt;
  4. &lt;div class=&quot;container-fluid px-xl-0 mx-xl-5&quot;&gt;
  5. &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;
  6. &lt;img src=&quot;{{ url_for(&#39;static&#39;, filename=&#39;images/logo-no-background.svg&#39;) }}&quot; alt=&quot;&quot; class=&quot;&quot;&gt;
  7. &lt;/a&gt;
  8. ...][1]][1]

答案1

得分: 1

你的 navbar-brand 大小没有改变，因为它的显示属性是 inline，因为 <a> 标签默认的显示属性是 display:inline。

将 display:block 添加到 navbar-brand 中，你的 width 将生效：

  1. .navbar-brand {
  2.     width: 3.5rem;
  3.     padding: 0 0;
  4.     margin: 0.3rem 0;
  5.     position: relative;
  6.     display: block;
  7. }
英文:

your navbar-brand size isn't changing because its display is inline as &lt;a&gt; tag has display:inline by default.

add display:block to the navbar-brand and your width will take effect:

  1. .navbar-brand {
  2. width: 3.5rem;
  3. padding: 0 0;
  4. margin: 0.3rem 0;
  5. position: relative;
  6. display: block;
  7. }

huangapple
  • 本文由 发表于 2023年5月28日 01:49:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/76348271.html
  • bootstrap-5
  • css
  • html
匿名

发表评论

匿名网友

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

确定