我正在嘗試獲取一個輸入框來拉伸螢屏的整個寬度，但是由于專案的原因，它在上面是 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>uj5u.com熱心網友回復：
在您的回復按鈕示例中隱藏錯誤...我看到以下內容：
輸入和表單都是具有默認寬度（未指定）的未命名 div 的子項。
如果您將該父級的寬度設定為 100%，那么您的輸入（也缺少 a width: 100%）將會拉伸，如下所示：
然后，您需要定義您想對灰色聊天框做什么，但請記住：
- 如果沒有指定的理由，您不能期望元素會拉伸到任何東西的全寬。檢查默認寬度值（自動）：
https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css/
請閱讀這篇文章，它詳細解釋了 max-content、min-content、fit-content、pro's 和 con's 等。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429627.html
標籤：javascript 推特引导 弹性盒 引导程序 5