Question

我正在尝试将Bootstrap 4.1的align-middle应用于col内部的row。但是似乎其中的内容与顶部保持对齐。这是我的代码：

<body class="d-flex">
  <div class="container-fluid">
    <a class="my-container" href="#">
      <div class="row">
        <div class="col flex-grow-1">
          Line 1<br>Line 2<br>Line 3
        </div>
        <div class="col-auto text-right align-middle">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </a>
  </div>
</body>

以下是显示结果的代码段：

<link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<body class="d-flex">
  <div class="container-fluid">
    <a class="my-container" href="#">
      <div class="row">
        <div class="col flex-grow-1">
          Line 1<br>Line 2<br>Line 3
        </div>
        <div class="col-auto text-right align-middle">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </a>
  </div>
</body>

如何正确对齐图标？

Answer 1

您可以在该列上使用Bootstrap 4的my-auto类。这是代码：

html：

<div class="container-fluid">
  <a class="my-container" href="#">
  <div class="row">
    <div class="col flex-grow-1 my-auto">
      <p>line 1</p>
      <p>line 1</p>
      <p>line 1</p>
    </div>
  <div class="col-auto text-right">
  <i class="fas fa-chevron-right"></i>
</div>

css：

p {
  margin: 16px;
}

该段的页边距为1rem，因此您可以像我一样删除页边距或给它一个整体页边距。这对我来说很好。

Answer 2

尝试用i包装span，并让span具有align-middle类

Answer 3

您可以给dfsplt <- strsplit( gsub("([^\\w])","~\\1~", df, perl = TRUE), "~") dfsplt <- lapply(dfsplt, function(x) x[!x %in% c("", " ")]) n <- max(lengths(dfsplt)) sapply(dfsplt, function(x) {x <- rep(x, ceiling(n / length(x))); x[1:n]}) # or sapply(dfsplt, function(x) x[(1:n - 1) %% length(x) + 1]) [,1] [,2] [,3] [1,] "How" "Why" "How" [2,] "did" "does" "do" [3,] "Quebec" "valve" "I" [4,] "?" "=" "use" [5,] "1" "." "a" [6,] "2" "245" "period" [7,] "3" "?" "(" [8,] "How" "." "." [9,] "did" "66" ")" [10,] "Quebec" "Why" "comma" [11,] "?" "does" "[" [12,] "1" "valve" "," [13,] "2" "=" "]" [14,] "3" "." "and" [15,] "How" "245" "hyphen" [16,] "did" "?" "{" [17,] "Quebec" "." "-" [18,] "?" "66" "}" [19,] "1" "Why" "to" [20,] "2" "does" "columns" [21,] "3" "valve" "?"设置一个固定的高度，然后相应地调整row的行高。请参见下面的代码：

html：

col

css：

<div class="container-fluid">
<a class="my-container" href="#">
  <div class="row">
    <div class="col flex-grow-1">
      Line 1<br>Line 2<br>Line 3
    </div>
    <div class="col-auto text-right">
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>
</a>

如果列中只有一行，则可以使列的行高与行高相同。现在，您有三行，因此将行高除以三。

在Bootstrap 4.1容器流体>行> col的中间垂直对齐div

3 个答案: