Member 14566743 Ответов: 1

Гибкий окно в Bootstrap

Когда я выполняю HTML файл в Visual Studio Code и пишу Flexbox Bootstrap код в Visual Studio Code какой то код не запускается

Что я уже пробовал:

<div class="parent d-flex flex-wrap" >
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
</div>
<br/>
<div class="parent d-flex-justify-content-start" >
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
</div>
<br/>
<div class="parent d-flex-justify-content-end" >
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
</div>
<br/>
<div class="parent d-flex-justify-content-center" >
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
</div>
<br/>
<div class="parent d-flex-justify-content-between" >
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
</div>

Richard Deeming

Ну что ж, исправь это так. делает тогда беги!

Если вы хотите, чтобы кто-то здесь помог вам, вам нужно будет предоставить лучшее объяснение проблемы. Помните, что мы не можем видеть ваш экран, получить доступ к вашему компьютеру или прочитать ваши мысли. Единственная информация, с которой мы можем работать, - это то, что Вы нам говорите.

1 Ответов

Рейтинг:
5

Chris Maunder

Во-первых, вы должны использовать Bootstrap 4.0 или выше, чтобы получить поддержку flex.

Во-вторых, попробуйте это:



<style>
.parent { background: blue; }

.child {
  background: grey;
  height: 50px;
}
</style>

<div class="parent d-flex flex-wrap" >
    <div class="child m-1">item1</div>
    <div class="child m-1">item2</div>
    <div class="child m-1">item3</div>
    <div class="child m-1">item4</div>
</div>
<br/>
<div class="parent d-flex justify-content-start" >
    <div class="child m-1">item1</div>
    <div class="child m-1">item2</div>
    <div class="child m-1">item3</div>
    <div class="child m-1">item4</div>
</div>
<br/>
<div class="parent d-flex justify-content-end" >
    <div class="child m-1">item1</div>
    <div class="child m-1">item2</div>
    <div class="child m-1">item3</div>
    <div class="child m-1">item4</div>
</div>
<br/>
<div class="parent d-flex justify-content-center" >
    <div class="child m-1">item1</div>
    <div class="child m-1">item2</div>
    <div class="child m-1">item3</div>
    <div class="child m-1">item4</div>
</div>
<br/>
<div class="parent d-flex justify-content-between" >
    <div class="child m-1">item1</div>
    <div class="child m-1">item2</div>
    <div class="child m-1">item3</div>
    <div class="child m-1">item4</div>
</div>