@Axiniya

Блоки не встают в сетку bootstrap. Как сделать чтобы таблицей были?

Есть такой вот код:
<div class="container">
		<div class="row">
				<div class="img1 jopa">
				<img src="img/img1.png" alt="">
				<div class="text66">
				<p class="marketing">Marketing</p>
				<p class="seo">SEO Project Managment Tool</p>
				</div></div>

				<div class="img2 jopa">
				<img src="img/img2.png" alt="">
				<div class="text66">
				<p class="marketing">UI Design</p>
				<p class="seo">Desktop Sign Up Flow</p>
				</div></div>

				<div class="img3 jopa">
				<img src="img/img2.png" alt="">
				<div class="text66">
				<p class="marketing">UI Design</p>
				<p class="seo">Desktop Sign Up Flow</p>
				</div></div>

				<div class="img4 jopa">
				<img src="img/img2.png" alt="">
				<div class="text66">
				<p class="marketing">UI Design</p>
				<p class="seo">Desktop Sign Up Flow</p>
				</div></div>
			</div>
		</div><code lang="html">

</code>

<code lang="css">
.marketing {
	font-size: 18px;
	color: #768393;
}

.seo {
	font-size: 25px;
	color: #3a364f;
}

.text66 {
	position: relative;
	bottom: 171px;
	left: 230px;
}
</code>

При применении флексов появляется полоса прокрутки, уже не знаю что сделать, помогите, пожалуйста

Вот так вот стоят и все 
<img src="https://habrastorage.org/webt/5e/58/e9/5e58e914b41fb082930228.png" alt="image"/>
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 2
@Axiniya Автор вопроса
помогло присвоение к каждой картинке класса mg-fluid
Ответ написан
sharomet
@sharomet
Front-End
А с чего этот код вообще должен работать?
При применении флексов появляется полоса прокрутки, уже не знаю что сделать, помогите, пожалуйста

Где вы применяете флексы?

Вы не читали документацию bootstrap?
https://getbootstrap.com/docs/4.4/layout/grid/

Насколько мне известно bootstrap использует такую структуру
<div class="container">
  <div class="row">
    <div class="col-..">

у вас
<div class="container">
  <div class="row">
    <div class="img..  jopa">

Если вы не хотите прописывать класс 'col-..' то хотя бы пропишите свойства вашему классу 'jopa'.
.jopa { /* это если нужно 4 в ряд */
 flex: 0 0 25%; 
 max-width: 25%;
 padding-left: 15px;
 padding-right: 15px;
}


Или исправьте html
<div class="container">
  <div class="row">
    <div class="img..  jopa col-lg-4"> <!-- В зависимости от разрешения и нужной ширины колонки -->
Ответ написан
Ваш ответ на вопрос

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

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