Question

我已经使用了搜索表单的下拉菜单，例如单击搜索图标时，出现搜索表单。它可以正常工作并按预期放置，但是当断点达到较小的屏幕尺寸时，搜索表单将无法正确地附加搜索图标。通过运行代码并在小屏幕上查看，您可以观察到这一点。

html,body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #f0f0f0;
width: 100%;
}
#NavigationSection .bg-light{
    background: white !important;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100" rel="stylesheet" >

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="styles/stle.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

</head>

<body>

<!-- Navigation -->
<section id="NavigationSection">
    <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
        <div class="container-fluid">
        	<a href="index.html" class="navbar-brand">LOGO</a>
          	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
          	<div class="collapse navbar-collapse" id="navNavbar">
            	<ul class="navbar-nav ml-auto">
              		<li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
              		<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
              		<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
              		<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            	    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" id="search" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-bottom: 0px;padding-top: 3px;"><i class="fas fa-search fa-2x"></i></a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="search" style="min-width:17rem;padding: 0.5rem;float:left">
                            <form class="form-inline my-lg-0" method="get" action="results.php">
                                <div class="input-group">
                                    <input class="form-control" type="text" placeholder="Search" name="user_query" required>
                                    <div class="input-group-append"><button class="btn btn-outline-success my-2 my-sm-0" type="submit" value="Search" name="search"><i class="fas fa-search" aria-hidden="true"></i>
                                    </button></div>
                                </div>
                            </form>
                        </div>
                    </li>  
                </ul>
          	</div>
		</div>
    </nav>
</section>


<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


</body>
</html>

Answer 1

在以下行中，

<button class="btn btn-outline-success my-2 my-sm-0" type="submit" value="Search" name="search">

删除my-2，请参见下文（负责y轴的边距）。

<button class="btn btn-outline-success my-sm-0" type="submit" value="Search" name="search">

我相信这可以解决问题。我希望这有帮助。谢谢。

搜索图标未在Bootstrap 4的小屏幕上正确附加搜索表单

1 个答案: