如何实现Bootstrap两列始终同行且左侧列自适应适配全屏幕尺寸？

我来帮你搞定这个布局问题！你遇到的情况是因为Bootstrap的col-lg-*类只在屏幕宽度≥992px的时候才会启用两列布局，小屏幕下这些列会自动变成100%宽度，导致堆叠。要实现任何屏幕下都保持同一行，左侧自适应调整，可以通过修改Bootstrap的flex布局类来实现：

修改后的代码 #

<div class="container"> 
 <div class="row flex-nowrap"> 
 <div class="col"> 
 <div class="form-group mb-3"> 
 <label asp-for=Title></label> 
 <input readonly class="form-control form-control-lg" asp-for=Title placeholder="Title"/> 
 </div> 
 <div class="form-group mb-3"> 
 <label asp-for=Description></label> 
 <textarea readonly class="form-control" asp-for=Description rows="3"></textarea> 
 </div> 
 <div class="form-group mb-3"> 
 <label asp-for=Price></label> 
 <input readonly class="form-control" asp-for=Price/> 
 </div> 
 <div class="form-group mb-3"> 
 <label asp-for=Location></label> 
 <input readonly class="form-control" asp-for=Location/> 
 </div> 
 <div class="form-group mb-3"> 
 <label asp-for="CategoryName"></label> 
 <input readonly class="form-control" asp-for="CategoryName" /> 
 </div> 
 <div class="form-group mb-3"> 
 <label asp-for="DateCreatedOn"></label> 
 <input readonly class="form-control" asp-for="DateCreatedOn" /> 
 </div> 
 </div> 
 <div class="col-auto flex-shrink-0"> 
 <div class="container"> 
 <div class="card border border-primary rounded p-0 mb-3 mx-1"> 
 <div class="card-body"> 
 <img id="image1" src="@profilePictureSrc" class="card-img"> 
 </div> 
 <div class="card-footer text-center"> 
 <input readonly class="form-control text-center" asp-for="UserName"/> 
 </div> 
 </div> 
 </div> 
 </div> 
 </div> 
 </div>

关键修改点说明 #

• flex-nowrap：给.row添加这个类，强制行内的列始终保持在同一行，不会因为屏幕尺寸缩小而换行。
• .col：左侧列使用这个类，它会自动占据容器内的剩余可用空间，实现自适应调整的效果，在任何屏幕下都会根据右侧列的宽度动态调整自身宽度。
• .col-auto + flex-shrink-0：右侧列用col-auto让它根据内部内容的宽度自动适配，flex-shrink-0防止它在屏幕变小时被挤压变形，保证卡片内容的完整性。

这样修改后，不管是大屏幕还是移动端，两列都会始终保持在同一行，左侧自动调整宽度适配剩余空间，完美满足你的需求！

内容的提问来源于stack exchange，提问作者Nikola Develops