在 Django Python API 中设置导航栏样式

Question

我一直在尝试在我的 API 项目上设置导航栏（附加图像）的样式，但没有成功。 我如何才能将这 3 个块均匀地放置在任何屏幕上（图像中为 80%）？ 我应该将它们放在卡内吗？有什么建议吗？ 我不得不添加一堆“&n b s p;”以正确的方式展示它的意愿。

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="collapse navbar-collapse" id="navbar">
      <div>
        <form action="{% url 'add_stock' %}" class="form-inline my-2 my-lg-0" method="POST">
        {% csrf_token %}
          <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">
            <a><i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp; Add to Portfolio </a>
          </button>
          &nbsp; 
         <input class="form-control mr-sm-2" type="search" placeholder="Enter a ticker" aria-label="Search" name="ticker">
        </form>
      </div>
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 

      <div>
        <button class="btn btn-flip" id="getStock" >
           <h5><strong> STOCK SCRENNER </strong></h5> </button>
      </div>

      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;          

      <div>
        <form action="{% url 'home' %}" class="form-inline my-2 my-lg-0" method="POST">
        {% csrf_token %}
        <input class="form-control mr-sm-2" type="search" placeholder="Enter a ticker" aria-label="Search" name="ticker">
        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit" >
          <a><i class="fa-solid fa-circle-check" aria-hidden="true"></i>&nbsp; Get Stock Quote</button>
        </form>
      </div>
    </div>
  </nav>
</header>

CSS
    #getStock {
     color: rgb(255, 208, 0);
     background-color: black;
     padding: 10px 20px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     margin: 4px 2px;
     text-align: center;
     border-radius: 10px;
     border: 3px solid  rgb(255, 208, 0);
     box-shadow: 0px 0px 4px 4px rgb(231, 227, 227);
    }

   #getStock:hover {  
     color: black;
     background-color: rgb(255, 208, 0);
     border: 3px solid  black;
     transition: border 0.3s ease-in;
    }

Answer 1

如果您是 Bootstap，请使用

.navbar

类。 .navbar 使用 Flex 布局，默认为 justify-content: space- Between 。根据需要使用额外的 Flex 实用程序来调整此行为。

您的代码

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="collapse navbar-collapse" id="navbar">
      <div> .... </div> 
      ....
      <div> .... </div> 
      ....
       <div> .... </div> 
    </div>
  </nav>
</header>

编辑代码-

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class=" navbar collapse navbar-collapse" id="navbar"> // <-- add class/justify-content: space-between here
      <div> .... </div> 
      ....
      <div> .... </div> 
      ....
       <div> .... </div> 
    </div>
  </nav>
</header>

https://getbootstrap.com/docs/4.4/components/navbar/#:~:text=navbar%20use%20flex%20layout%20and,需要%20to%20adjust%20this%20behavior.&text=Various%20buttons% 20%20支持%20as，到%20对齐%20不同%20sized%20个元素。