具有固定和灵活宽度列的Bootstrap 4 Flexbox [英] Bootstrap 4 Flexbox with Fixed and Flexible Width Columns

问题描述

使用Bootstrap 4和Flexbox，如何用固定宽度的左列和灵活的右列完成2列的布局?

Using Bootstrap 4 and Flexbox, how would you accomplish a 2 column layout with a fixed-width left column and a flexible right column?

我没有在文档中看到有关如何实现此目标的任何信息...我可以使用原始CSS轻松地完成此操作，但是我觉得我应该使用Bootstrap，因为我已经将其引入了.

I don't see anything in the docs about how to achieve this... I could do it easily enough using vanilla CSS, but I feel like I should use Bootstrap since I'm already pulling it in.

推荐答案

这是您要查找的内容:

HTML CODE ---- >>

HTML CODE---->>

 <div class="main-container">
  <div class="left">
  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.
  </div>
  <div class="right">
  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.
  </div>
</div>

CSS ------- >>

CSS------->>

.main-container{
  display:flex;
  flex-direction:row;
}

.left{

  min-width:200px;
  max-width:200px;
}

还 Codepen 链接.

这篇关于具有固定和灵活宽度列的Bootstrap 4 Flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！