Bootstrap - портфолио слева, название и описание справа - PullRequest
Новая
       7

Bootstrap - портфолио слева, название и описание справа

0 голосов
/ 14 января 2019

Я пытаюсь создать свой веб-сайт портфолио, и я застрял ...

Я хочу, чтобы изображение портфолио было слева, а название и описание справа.

Итак, структура будет:

Изображение - Текст

Изображение - Текст

Изображение - Текст

Я пытался написать какой-то код, и он работает, но я не уверен, что это лучший способ сделать это. 

<section class="section works" id="works">
    <div class="container">
        <div class="row">
            <div class="works-item col-md-12 col-xs-12">
                    <div class="row">
                        <div class="works-image col-md-6">
                            <img src="1.jpg" alt="">
                            <div class="overlay"></div>
                        </div>
                        <div class="item-info col-md-6">
                            <h4 class="item-name">Some Title here</h4>
                            <p class="item-type">Description should be here</p>
                        </div>
                    </div>
            </div>
        </div>
</section>

Это бутстрап 3

1 Ответ

0 голосов
/ 14 января 2019

То, как вы использовали, является правильным. но это будет работать на некоторых устройствах, так как вы использовали col-md

если хочешь Изображение - Текст

Изображение - Текст

Изображение - Текст

для всех устройств. 

<section class="section works" id="works">
    <div class="container">
        <div class="row">
            <div class="works-item col-md-12 col-xs-12">
                    <div class="row">
                        <div class="works-image col-xs-6">
                            <img src="1.jpg" alt="">
                            <div class="overlay"></div>
                        </div>
                        <div class="item-info col-xs-6">
                            <h4 class="item-name">Some Title here</h4>
                            <p class="item-type">Description should be here</p>
                        </div>
                    </div>
            </div>
        </div>
</section

если вы хотите 40% для изображения и 60% для текста, используйте col-xs-4 col-xs-8 соответственно

...