时间戳

首页 > 解决方案 > 如何在不影响网页响应性的情况下将搜索栏放在导航栏的中心？

javascript - 如何在不影响网页响应性的情况下将搜索栏放在导航栏的中心？

问题描述

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>{% block title %} {% endblock %} - Snaplost</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@700&display=swap" rel="stylesheet">
  <link href="{{ url_for('static', filename='style.css' )}}" rel="stylesheet">  
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@700&display=swap" rel="stylesheet">

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="{{ url_for('home') }}">Snaplost.</a>
    </div>
    
      <ul class="nav navbar-nav navbar-center">
		<form class="navbar-form navbar-center" role="search">
        	<div class="form-group input-group">
          	<input type="text" class="form-control" placeholder="Search..">
          	<span class="input-group-btn">
            	<button class="btn btn-default" type="button">
            	<span class="glyphicon glyphicon-search"></span>
            </button>
          	</span>        
        	</div>
      	</form>
       </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Login</a></li>
        <li><a href="#">Register</a></li>
      </ul>
      
    </div>
  </div>
</nav>

<div class="container">    
	{% block content %} {% endblock %}  
</div>

<script src=""https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


</body>
</html>

任何人都可以建议或帮助我解决这个问题吗？谢谢！

标签： javascripthtmlcssbootstrap-4

解决方案

我想您是在问如何确保它保持在顶部而不换行？

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

关于 flexbox 的重要信息： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望能帮助到你！

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

要使用 flexbox 使您的内容“包裹”到下一行，您只需使一行中的所有内容占其中总宽度的 100%，或者使其下一个元素（或父容器）不适合在同一行中：例如
第一行：两个元素，每个元素的宽度为 33% 第二行：一个元素的定义宽度为 35% 或更多 [100% - (33% * 2) = 34% 宽度或更少不会环绕]

因此，您可以将搜索栏的 div 宽度设置为 100%，或者将您的登录和注册链接设置为足够大的宽度，以使搜索栏不适合该行...

甚至更简单，您可以在 HTML 的搜索栏之前添加一个换行标记 "<' br '>" ；)

祝你的项目好运！

推荐阅读