Блог

Главная - Вопросы по программированию - Почему не сработал текстовый центр react-bootstrap ? и почему сам мой HR-автоцентр, если я изменю ширину?

Почему не сработал текстовый центр react-bootstrap ? и почему сам мой HR-автоцентр, если я изменю ширину?

#html #css #reactjs #bootstrap-4

Вопрос:

Привет, ребята, поэтому я пытаюсь создать интерфейс для своего веб-сайта с помощью react-bootstrap, и я пытаюсь изменить ширину своего кадра, но сам автоцентр, почему это так ? а также я пытаюсь использовать className=»text-center» из начальной загрузки, чтобы центрировать вещи из моего списка, но это не сработало, может ли кто-нибудь помочь мне с этим, пожалуйста ? Я уже импортировал css начальной загрузки, но все еще не работал.

вот мой код:

       <Row className="aboutus regular">
        <Col className="aboutusleft" lg ="6" >
            <h1 className="semibold"> About Us</h1>
            <hr style={{width:'20%'}}></hr>

            <p>Diamond Hotel serves as an urban oasis for both discerning business and leisure travelers. Located in the heart of Samarinda and close to the most prominent culinary tourism object. The hotel itself possess a trendy design with attention to comfort, quality and value based accommodation. It features 75 modern rooms and suites with contemporary design environment to make you feel completely at home.</p>

            <button className="aboutbutton">Learn More</button>
        </Col>

        <Col className="aboutusright text-center" lg ="4">
          <img src="./img/Group4.png"></img>
        </Col>
      </Row>

Мой index.js (Расположена начальная загрузка CSS):

 import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Комментарии:

1. Это помогло бы прояснить, о чем вы спрашиваете, если вы опубликуете, как выглядит текущий вывод и как вы хотите, чтобы он выглядел.

2. Я хочу, чтобы имя класса=»текстовый центр» помогло мне центрировать все, что хранится внутри этого класса, в моем случае это изображение, и для тега HR я хочу, чтобы он оставался в нормальном положении, то есть с левой стороны, не центрированной.

3. работал ли какой-либо из ваших классов начальной загрузки или возникли проблемы только с классом текстового центра

4. также укажите поле: 0 для элемента hr, он переместится влево

5. только текстовый центр, я могу использовать другой класс начальной загрузки

Ответ №1:

  <Col className="aboutusright mx-auto" lg ="4">
    <img src="./img/Group4.png"></img>
 </Col>

Пожалуйста, используйте «mx-auto» вместо «текстовый центр».

Метки: ,