英文:
Move the Search box in the end of the navbar
问题
I want to move the search input and search icon to the end of the navbar.
英文:
I want to move the search icon and search input at the end of the navbar.
I'm using Bootstrap 5.0.2
IDK how to move the icon and search box at the end as I'm new to Bootstrap, HTML, and CSS as well.
also i dont want to increase the size of the search box i want its width to be 50% if i make the width to 100% the search box and icon will go in the end but i want its width to be 50% and keep both of them in the end
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.Banner {
width: 100%;
height: 75%;
position: fixed;
background-image: url(/NavBar/Img.png);
background-size: cover;
background-position: center;
}
.icon-white {
color: white;
font-size: 20px;
cursor: pointer;
}
.cont:hover .cube {
color: black;
}
#searchform {
float: right;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linux Coder</title>
<link rel="stylesheet" href="/style.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>
<body>
<!-- container -->
<div class="container-fluid bg-dark" style="height: 1000px;">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark row">
<div class="container-fluid">
<a class="navbar-brand" href="#">Linux Coder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOGS</a>
</li>
<!-- Search box -->
</ul>
<form id="#searchform" class="d-flex">
<input style="width: 50%;" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
</form>
</div>
</div>
</nav>
<hr style="color: white; margin: 0;">
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
I want to move the search input and search icon to the end of the navbar
答案1
得分: 5
从搜索栏的输入中删除style="width: 50%"。它会导致容器的宽度是输入的两倍，而搜索图标比输入要小。这导致了白色空间。
正如您在评论中所说，您希望在输入上使用width: 50%，您还可以在输入上使用ms-auto类，将所有元素移动到flexbox容器的末尾：
<form id="#searchform" class="d-flex">
<input class="form-control me-2 ms-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
</form>
只需删除输入元素上的style属性，不要设置width: 50%。这将解决容器大小和搜索图标大小的问题。
英文:
remove the style="width: 50%" from the input of your search bar. It causes the container to be twice as large then the input while the search icon is smaller than the input. That caused the white-space.
As you said within the comment that you want width: 50% on the input, you could also use the class ms-auto on the input to move all elements to the end of the flexbox container:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.Banner {
width: 100%;
height: 75%;
position: fixed;
background-image: url(/NavBar/Img.png);
background-size: cover;
background-position: center;
}
.icon-white {
color: white;
font-size: 20px;
cursor: pointer;
}
.cont:hover .cube {
color: black;
}
#searchform {
float: right;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linux Coder</title>
<link rel="stylesheet" href="/style.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>
<body>
<!-- container -->
<div class="container-fluid bg-dark" style="height: 1000px;">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark row">
<div class="container-fluid">
<a class="navbar-brand" href="#">Linux Coder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOGS</a>
</li>
<!-- Search box -->
</ul>
<form id="#searchform" class="d-flex">
<input style="width: 50%;" class="form-control me-2 ms-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
</form>
</div>
</div>
</nav>
<hr style="color: white; margin: 0;">
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
以下是您提供的代码部分的翻译：
.Banner {
width: 100%;
height: 75%;
position: fixed;
background-image: url(/NavBar/Img.png);
background-size: cover;
background-position: center;
}
.icon-white {
color: white;
font-size: 20px;
cursor: pointer;
}
.cont:hover .cube {
color: black;
}
#searchform {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linux Coder</title>
<link rel="stylesheet" href="/style.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>
<body>
<!-- container -->
<div class="container-fluid bg-dark" style="height: 1000px;">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark row">
<div class="container-fluid">
<a class="navbar-brand" href="#">Linux Coder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOGS</a>
</li>
</ul>
<form id="#searchform" class="d-flex">
<input class="form-control me-2 ms-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
</form>
</div>
</div>
</nav>
<hr style="color: white; margin: 0;">
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="httpscdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</div>
</body>
</html>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.Banner {
width: 100%;
height: 75%;
position: fixed;
background-image: url(/NavBar/Img.png);
background-size: cover;
background-position: center;
}
.icon-white {
color: white;
font-size: 20px;
cursor: pointer;
}
.cont:hover .cube {
color: black;
}
#searchform {
float: right;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linux Coder</title>
<link rel="stylesheet" href="/style.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>
<body>
<!-- container -->
<div class="container-fluid bg-dark" style="height: 1000px;">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark row">
<div class="container-fluid">
<a class="navbar-brand" href="#">Linux Coder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOGS</a>
</li>
<!-- Search box -->
</ul>
<form id="#searchform" class="d-flex">
<input class="form-control me-2 ms-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
</form>
</div>
</div>
</nav>
<hr style="color: white; margin: 0;">
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
答案3
得分: -1
.navbar的直接子元素使用了flex布局，将默认采用justify-content: space-between。根据需要，可以使用附加的flex工具来调整这个行为。
Bootstrap文档
你可以像使用CSS一样使用flex属性，我认为你需要的是justify-self属性。
英文:
Immediate child elements of .navbar use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior.
https://getbootstrap.com/docs/5.2/utilities/flex/
You can use flex property in the same way of css, justify-self property is what u need I think
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论