如何有两个引导列，右边的一个被装箱，左边的一个从中心到左边是全宽的
Posted
技术标签:
【中文标题】如何有两个引导列，右边的一个被装箱，左边的一个从中心到左边是全宽的【英文标题】：How to have two bootstrap columns with the right one being boxed and the left one being full width from center to left 【发布时间】：2021-12-27 11:59:04 【问题描述】：我有两个相邻的 div。我希望第一个 div 的行为就像它在“容器流体”内一样，所以向左无限填充宽度（根据屏幕宽度/大小），第二个 div 就像它在一个普通容器内一样，所以停在就在容器宽度处。
我该怎么做？
我只知道如何使它们都成为页面的全宽或将它们都装在容器中。不是如何使左侧全宽和右侧装箱。这个可以吗？
.divresellerleft
width: 40%;
height: 600px;
background-color: #eeeeee;
position: relative;
.divresellerright
display: flex;
flex-direction: column;
width: 60%;
height: 600px;
padding-left: 140px;
align-items: flex-start;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container-fluid bannernopadd">
<div class="resellerblockwrap">
<div class="divresellerleft">
<img src="https://via.placeholder.com/80" >
</div>
<div class="divresellerright row">
<div class="insidekopje">
<h1>Snel verdiend</h1>
<span>Bouw aan je merk. Groei met ons mee. Zo worden we samen sterk.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>我需要这种布局，因为左侧 div 有一个背景颜色，我总是想一直到屏幕左侧。
示例图片：
【问题讨论】：
您有一个容器和一行，但没有列。看起来你应该有两行三列（总共）。您也可以使用两个容器（每种类型一个）。请查看grid docs。 我对你的要求有点困惑。您有一个带有“全屏宽度”的框，但旁边有一些东西。您还有两个宽度有限但大小不同的容器。请修改以澄清。 @isherwood 是的，我的意思是左边的盒子需要无限地向左移动（根据屏幕尺寸），右边的盒子永远不会离开容器。所以基本上在一个 1200 像素的容器内有两列，右边的一列永远不会超过 1200 像素，但左边的一列需要在容器外达到左侧的全宽。 【参考方案1】：为此，父级应该是带有display: flex; 的弹性容器。
然后给左孩子flex: 1;。
右孩子需要有一个固定的宽度（可以是百分比）
【讨论】：
【参考方案2】：.left-column
box-shadow: -100vw 0 0 100vw #212529;
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
<main>
<div class="overflow-hidden">
<div class="container">
<div class="row">
<div class="col-md-3 bg-dark text-white py-3 left-column">Left</div>
<div class="col-md-9 py-3 right-column">
<h4>What is Lorem Ipsum?</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div>
</div>
</main>
</body>
</html>【讨论】：
请以全页模式运行代码 sn-p。让我知道你需要这种类型还是左栏的内容应该从屏幕的开头开始。以上是关于如何有两个引导列，右边的一个被装箱，左边的一个从中心到左边是全宽的的主要内容，如果未能解决你的问题，请参考以下文章
css 两列布局 右边固定 左边可伸缩 但是有最小宽度 如何实现？