【发布时间】：2022-02-09 04:21:23
【问题描述】：
我正在尝试获取一个输入框来拉伸屏幕的整个宽度，但是由于项目的原因，它在上面被 div 了，它只占用了一小部分，当它取消隐藏时它也会拖动上面的项目用它。我尝试过 flex-stretch、align-items:stretch 等，但似乎没有任何效果。我什至自己给了它一个 div，但我无法让它工作。
如果您单击下面代码中的回复按钮，它将向您显示我的确切问题：
document.getElementById("reply64").addEventListener('click', (e) => {
document.getElementById("reply64").classList.toggle("blue");
document.getElementById("reply_form64").classList.toggle("open");
});
document.getElementById("reply71").addEventListener('click', (e) => {
document.getElementById("reply71").classList.toggle("blue");
document.getElementById("submit_reply71").classList.toggle("open");
});.lk{
display: flex;
margin-bottom: 5px;
font-size: 14px;
gap: 5px;
}
.profile_image{
width: 30px;
height: 30px;
border-radius: 50%;
}
.user{
background: grey;
padding: 10px;
border-radius: 20px;
}
.reply-body{
width: 100%;
flex-shrink: 0;
}
.reply {
display: flex;
justify-content: legacy left;
gap: 10px;
}
.thumb.open, .vl.open, .form-hidden.open{
display: flex;
}
.form-hidden{
display: none;
}
.blue{
color: blue;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="lk">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div>
<div class="user">
<div class="reply_author">jon 2 days ago </div>
<div class="reply-body">hi dawg!</div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote64" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(64,1)"></i>
<span id="upvote_count_badge64" class="badge bg-secondary">1</span>
<i id="downvote64" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(64,0)"></i>
</div>
<div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
<div id="facti_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(64)">
<i class="fas fa-award hover"></i>
</div>
</div>
<div id="vl64" class="vl"></div>
<form id="reply_form64" class="form-hidden">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="cmt-reply" type="text" placeholder="Write a reply2">
</form>
<div id="reply_loader64"><!--Nested Replies go here--></div>
</div>
</div>
<div class="lk">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div>
<div class="user">
<div class="reply_author">jon 2 hours ago </div>
<div class="reply-body">yo</div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote71" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(71,1)"></i>
<span id="upvote_count_badge71" class="badge bg-secondary">0</span>
<i id="downvote71" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(71,0)"></i>
</div>
<!--This button unides a form, but the form messes up the other divs and does not expand all the way as I want-->
<div class="reply_comment" id="reply71">Reply</div>
<div id="facti_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(71)">
<i class="fas fa-award hover"></i>
</div>
</div>
<form id="submit_reply71" class="form-hidden">
<div class="post_comment">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
<div id="comment_input_error" class="invalid-feedback"></div>
</div>
</form>
</div>
<div id="reply_loader71"><!--Nested Replies go here--></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>【问题讨论】：
-
也许需要弹性增长？
-
我已经在多个不同的领域尝试过，但没有成功。
-
如果我点击回复，我得到一个错误
标签： javascript twitter-bootstrap flexbox bootstrap-5