Javascript 如何在导航栏中创建响应输入字段？
我有这个导航栏和导航栏中的一个输入字段。我想将输入宽度设置为导航栏的所有剩余宽度。而且它应该是反应灵敏的。我的意思是，当设备大小改变时，输入宽度应该改变。请帮帮我Javascript 如何在导航栏中创建响应输入字段？,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我有这个导航栏和导航栏中的一个输入字段。我想将输入宽度设置为导航栏的所有剩余宽度。而且它应该是反应灵敏的。我的意思是，当设备大小改变时，输入宽度应该改变。请帮帮我 li{ 列表样式：无； } .后期编辑.导航标题{ 边框：1px实心#ddd； 高度：40px； } .后期编辑.导航标题ul li按钮{ 边框：1px实心#7272； 背景色：#fff； 颜色：#7272； 字体大小：14px； 填充：3.5px 8px； 边界半径：3px； 利润上限：5.3倍； } 预览 发表
li{
列表样式：无；
}
.后期编辑.导航标题{
边框：1px实心#ddd；
高度：40px；
}
.后期编辑.导航标题ul li按钮{
边框：1px实心#7272；
背景色：#fff；
颜色：#7272；
字体大小：14px；
填充：3.5px 8px；
边界半径：3px；
利润上限：5.3倍；
}
-
-
预览
-
发表
- 步骤1：将包装容器的显示更改为flex box
- 步骤2：将所有子元素设置为flex grow 1，这会告诉子元素拉伸并占用父元素的整个剩余空间
文件
身体{
填充：4px；
边缘顶端：2rem；
}
李{
列表样式：无；
}
.后期编辑.导航标题{
边框：1px实心#ddd；
高度：40px；
}
.后期编辑.导航标题ul li按钮{
边框：1px实心#7272；
背景色：#fff；
颜色：#7272；
字体大小：14px；
填充：3.5px 8px；
边界半径：3px；
利润上限：5.3倍；
}
-
-
预览
-
发表
输入的宽度。因此，将此添加到css。宽度=100%-（nav余量）-（ul余量）
检查代码段
li{
列表样式：无；
}
.后期编辑.导航标题{
边框：1px实心#ddd；
高度：40px；
}
.后期编辑.导航标题ul li按钮{
边框：1px实心#7272；
背景色：#fff；
颜色：#7272；
字体大小：14px；
填充：3.5px 8px；
边界半径：3px；
利润上限：5.3倍；
}
输入{
宽度：钙（100%-15px-1em）；
}
-
-
预览
-
发表
请同时包括适用于您已包含的导航条形码的CSS的其余部分（例如，将预览和发布放在导航栏内）。我看到您正在使用bootstrap 3，升级到bootstrap 4，他们有一整节关于导航栏的内容。不过，要回答您的问题，只需使用引导网格系统来实现布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
<style>
body {
padding: 4px;
margin-top: 2rem;
}
li {
list-style: none;
}
.post-edit .nav-header {
border: 1px solid #ddd;
height: 40px;
}
.post-edit .nav-header ul li button {
border: 1px solid #727272;
background-color: #fff;
color: #727272;
font-size: 14px;
padding: 3.5px 8px;
border-radius: 3px;
margin-top: 5.3px;
}
</style>
</head>
<body>
<div class="container-fluid p-0">
<!-- Main Container -->
<main class="container-wrapper">
<div class="post-edit">
<form action="" method="post">
<div class="nav-header navbar navbar-expand-sm d-flex">
<!-- Left -->
<ul class="navbar-nav bg-primary flex-grow-1">
<li class="nav-item flex-grow-1 mr-1 ">
<div class="bg-success d-flex flex-grow-1">
<input type="text" name="p-title" placeholder="Title" class="flex-grow-1">
</div>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<button class="nav-link">Preview</button>
</li>
<li class="nav-item">
<button class="nav-link">Publish</button>
</li>
</ul>
</div>
</div>
</form>
</div><!-- /.post-edit -->
</main> <!-- /Main Container -->
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
</body>
</html>
input {
width: calc(100% - 15px - 1em); // 15px > nav-margin | 1em > ul margin
}