Как расшифровать этот React+Bootstrap код и как он визуально выглядит?

Есть такой React+Bootstrap код:

<div class="container-fluid">
 <Col xs={12} sm={8} smOffset={2}>
            <Image src="assets/person-1.jpg" className="about-profile-pic" rounded />
            <h3>Frank The Tank</h3>
            <p>That's a crooked tree. We'll send him to Washington. These little son of a guns hide in your brush and you just have to push them out. These trees are so much fun. I get started on them and I have a hard time stopping. How to paint. That's easy. What to paint. That's much harder. Be brave. The man who does the best job is the one who is happy at his job.</p>
            <p>Anyone can paint. You can do anything here. So don't worry about it. Life is too short to be alone, too precious. Share it with a friend. Every highlight needs it's own personal shadow.</p>
            <p>That's what makes life fun. That you can make these decisions. That you can create the world that you want. Of course he's a happy little stone, cause we don't have any other kind. It's so important to do something every day that will make you happy.</p>
            <p>You better get your coat out, this is going to be a cold painting. That's the way I look when I get home late; black and blue. That's crazy. We're trying to teach you a technique here and how to use it.</p>

Как расшифровать эту часть кода и как визуально она выглядит?
<Col xs={12} sm={8} smOffset={2}>
Я так понимаю это Bootstrap колонки, где xs, sm-это классы в зависимости от девайса пользователя, smOffset-отступ. а что значат цифры в скобках?
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
В Bootstrap есть 12 колонок, эти цифры означают сколько занимать колонок.В вашем примере sm={8} - означает на экранах sm-размера(≥576px) занять 8 колонок, smOffset={2} - смещения на sm-экранах на две колонки относительно левого края, то есть в общем займет 10 колонок из 12(2 колонки смещения слева и 8 ширина Col). Если указать число 12 то блок будет занимать всю ширину, xs={12} - на экранах <576px займет всю ширину.
Более подробно описано тут - https://react-bootstrap.github.io/layout/grid/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы