Question

我正在使用版本：

react@16.8.6
react-bootstrap@1.0.0-beta.8

我对应该在react，react-bootstrap和flexbox之间执行的操作感到有些困惑。我在名为LoginImage.js的文件中有一个简单的图像定义：

import React, { Component } from 'react'
import { Image } from "react-bootstrap";

class LoginImage extends Component {
  render() {
    return (
      <Image width="150" src="/staff_login.jpg" />
    );
  }
}

export default LoginImage;

我正在App.js文件中使用它，如下所示：

import LoginImage from './LoginImage'
...
    <Container>
      <Row>
        <Col xs={12} sm={4} md={4}>
          <LoginImage />
        </Col>
      </Row>
    </Container>

我知道CSS3和Flexbox分别提供“ justify-content”和“ align-items”以水平和垂直定位，但是尚不清楚我在上面的代码中应该在哪里使用它们，甚至鉴于以上所述，最好的方法是使图像居中。

感谢您的帮助。谢谢。

Answer 1

您可以使用react bootstrap的内置功能并实现以下内容：

fun <E> MutableList<E>.removeIfMatch(isMatchConsumer: (existingItem: E) -> Boolean) {
    var index = 0
    var lastIndex = this.size -1

    while(index <= lastIndex && lastIndex >= 0){
        when {
            isMatchConsumer.invoke(this[index]) -> {
                this.removeAt(index)
                lastIndex-- // max is decreased by 1
            }
            else -> index++ // only increment if we do not remove
        }
    }
}

要查阅文档，可以转到here。

Answer 2

在flexbox之外的另一种方法是：

<?= $form->field($model, 'referer')->hiddenInput()->label(false) ?>

Answer 3

我正在使用react-bootstrap将图像垂直和水平居中。

以下代码对我有用：

m-auto标记中的第一个Col使图像垂直居中，即到顶部和底部的距离相等。

mx-auto标签中的第二个img使图像水平居中，即，左右之间的距离相等。

d-block标签中的

img是必不可少的，因为默认情况下图像显示为嵌入式块。

import mysvg from "./images/mysvg.svg";
...
<Col sm={2} className="m-auto">
  <img
    className="d-block mx-auto img-fluid w-50"
    src={mysvg}
    alt="mysvg"
  ></img>
</Col>
...

使用react / react-bootstrap / flexbox居中图像

3 个答案: