Question

如您所知，引导程序是根据（flex row / column）的父类的值运行的。

.bd-highlight {
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .15);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row bd-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 class="d-flex flex-column bd-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>

我想在行中使用异常：像self-column

<div class="d-flex flex-row bd-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 self-column">Flex item 3</div>
</div>

我产生了这样的解决方案，但是没有用：

.bd-highlight {
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .15);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row bd-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 w-100">Flex item 3</div>
</div>

我不知道自己在做什么，但是可以添加到我的书架中吗？

Answer 1

您需要通过添加flex-wrap来激活自动换行：

.bd-highlight {
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .15);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row flex-wrap bd-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 w-100">Flex item 3</div>
</div>

Bootstrap Flex方向-行和列-

1 个答案: