代码之家 › 专栏 › 技术社区 › Toskan

引导程序的弹性列填充全宽,如何不拉伸到全宽?

bootstrap-4 flexbox

Toskan · 技术社区 · 6 年前

请参见这里:

https://getbootstrap.com/docs/4.0/utilities/flex/#direction

项目伸展到全宽,但这不是我真正想要的结果。

我想让这些东西保持原来的尺寸

正确的方法是什么?

1 回复 | 直到 6 年前

mahan 6 年前

包装 flex-column 元素与A col-auto 元素,以便它需要尽可能多的空间。

.bd-highlight {
  background: #eee;
  border: 1px solid
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-auto">
    <div class="d-flex flex-column bg-highlight mb-3">
      <div class="p-2 bd-highlight">Flex item 1</div>
      <div class="p-2 bd-highlight">Flex item 2</div>
      <div class="p-2 bd-highlight">Flex item 3</div>
    </div>
  </div>
</div>

您也可以使用容器。

更好的是,使用 d-flex 要包装的元素 柔性柱 元素。但是如果你这样做了,移除 D-柔性 和 柔性柱 从元素本身中类,而不是使用 w-auto .

BD高亮显示{
背景:eee;
边框:1倍纯色
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

  <div class="d-flex">
    <div class="w-auto bg-highlight mb-3">
      <div class="p-2 bd-highlight">Flex item 1</div>
      <div class="p-2 bd-highlight">Flex item 2</div>
      <div class="p-2 bd-highlight">Flex item 3</div>
    </div>
  </div>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前