Question

在容器流体中，我知道如何使用任何引导程序类使该内容居中。我可以使用边距和填充，但是我不想使用它。请帮助实现这一目标。

这是App.js

import React, { Component } from 'react';
import './App.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSuitcase } from '@fortawesome/free-solid-svg-icons';


class App extends Component {
  render() {
    return (
      <div className='container-fluid customcolor'>
        <div className='row'>
          <div className='icon'>
            <FontAwesomeIcon className='suitcasestyle fa-5x' icon={faSuitcase}></FontAwesomeIcon>
          </div>
          <div className='text'>
            <h1>Job Application</h1>
            <h3>Please complete the form below to apply for a position with us.</h3>
          </div>
        </div>
      </div>
    )
  }
}

export default App

这是App.css

.customcolor {
  background-color: red;
}

Answer 1

如果需要对齐文本中心，则需要将类text-center添加到container-fluid div中。

如果需要对齐内部内容，则需要将类justify-content-center添加到相应的行。否则，您需要在行周围放置另一个div包装器。

例如：<div className="d-flex justify-content-center">...</div>

d-flex是必需的。

row还应具有类col或col-*的子元素

我会写这样的东西。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class='container-fluid customcolor text-center'>
  <div class='row justify-content-center'>
    <div class="col-auto">

      <div class='text'>
        <h1>Job</h1>
        <h3>Please comp.</h3>
      </div>
    </div>
  </div>
</div>

检查bootstrap docs以获得更多信息

Bootstrap容器流体div中的中心内容

1 个答案: