Javascript 如何在不影响网页响应的情况下将搜索栏置于导航栏的中心？

我对CSS和HTML非常陌生，所以在为我的学校项目设计网页时遇到了困难

目前我正在尝试在导航栏的中间插入一个搜索栏。但是，我只能将其设置在栏的左侧或右侧。我在其他网站上找到了覆盖引导css代码的代码，并将搜索栏移动到页面中间，但当显示屏变小时，搜索栏不适合下拉菜单。

这是我用来设计网页的html文件

{%block title%}{%endblock%}-Snaplost {%block content%}{%endblock%}

---

我想你是在问，如何确保它保持在顶部，而不缠绕到新的生产线

如果是这样的话，flexbox可能是你最好的朋友。如果在父div上使用display:flex，它将强制所有内容保持在一行中，除非使用flex wrap:wrap属性。然后，您可以设置希望每个元素在这一行内容中占据的宽度，也可以使用flex grow

关于flexbox的重要信息：

希望有帮助

澄清后编辑： 因此，要使搜索栏移动到下一行内容，您仍然可以在父元素上使用flexbox和flex-wrap:wrap属性

要使用flexbox将您的内容包装到下一行，您只需使一行中的所有内容占据其中100%的宽度，或使其无法容纳下一个元素或父容器： 例如 第一行：两个元素，每个元素的宽度为33% 第二行：一个定义了35%或更多宽度的元素 [100%-33%*2=34%或更小的宽度不会缠绕]

因此，您可以将搜索栏div width设置为100%，或者将登录和注册链接设置为足够大的宽度，使搜索栏无法容纳该行

或者更简单的是，您可以在HTML的搜索栏前添加一个换行标记

---

祝你的项目好运

适合，如长度方面？不，我希望它在下拉菜单的另一行。我只是指出这一点，但你不小心在第7行到最后一行的错误位置放了两个引号。谢谢你为我发现了错误@svenHi抱歉我的描述不清楚，我的意思是如何将下拉视图中的搜索栏移到另一行而不是停留在登录和登记标签的中间。不确定是否从我那里得到一个通知，编辑答案或不，或者从这个评论…希望你能及时看到！嗨，谢谢你的及时帮助！既然我正在使用引导链接作为样式表，那么我可以检查如何尝试上述方法吗？我是否覆盖style.css文件中的某些方法？我也在搜索栏前尝试过标记，但似乎没有帮助。您可以在自己的style.css文件中覆盖引导样式，只要它在级联中比引导更靠下，链接到文件的后面，或者您可以制作一个内联标记并在那里写入css，同样，只要它在文档中更进一步，您的样式将覆盖具有相同特性的引导样式。如果你对CSS的特殊性不确定，好吧！非常感谢您，稍后我将尝试您的方法并告诉您它是如何工作的！非常感谢D