в моем случае я должен использовать 5 col-md для одной строки, а другой col-md должен go следующий ряд без открытой строки - PullRequest
Новая
       12

в моем случае я должен использовать 5 col-md для одной строки, а другой col-md должен go следующий ряд без открытой строки

1 голос
/ 03 мая 2020

в моем случае я должен использовать 5 col-md для одной строки, а другой col-md должен go следующий ряд без открытой строки. я пробовал с nth: child, и это не помогло мне, пожалуйста, помогите мне решить эту проблему. Пожалуйста, нажмите на полную страницу фрагмента, чтобы лучше просмотреть 

.col-md:nth-child(5){
    display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md">hi my name is</div>
            <div class="col-md">hi my name is</div>
            <div class="col-md">hi my name is</div>
            <div class="col-md">hi my name is</div>
            <div class="col-md">hi my name is</div>
            <div class="col-md">this is next row</div>
            <div class="col-md">this is next row</div>
            <div class="col-md">this is next row</div>
        </div>
    </div>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 03 мая 2020

Вы можете просто сделать это, установив flex-base на 20%. 

.col-md {
    flex: 0 0 20%;
}
1 голос
/ 03 мая 2020

Вам нужно разрешить перенос, затем контролировать flex-basis

.col-md:nth-child(n + 6) {
  flex-basis:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
  <div class="container">
    <div class="row flex-wrap">
      <div class="col-md">
        hi my name is
      </div>
      <div class="col-md">
        hi my name is
      </div>
      <div class="col-md">
        hi my name is
      </div>
      <div class="col-md">
        hi my name is
      </div>
      <div class="col-md">
        hi my name is
      </div>
      <div class="col-md">
        this is next row
      </div>
      <div class="col-md">
        this is next row
      </div>
      <div class="col-md">
        this is next row
      </div>

    </div>
  </div>
1 голос
/ 03 мая 2020

Проблема в том, что вы используете семь контейнеров. Тебе нужно шесть. Следующее, вы должны прикрепить правильный класс для последнего контейнера (100%). Что col-md-12. Вам не понадобятся дополнительные CSS. Все, что вам нужно, поддерживается Bootstrap. Пожалуйста, ознакомьтесь с Bootstrap документацией о том, как работает макет!

В качестве дополнительной информации col-md занимает столько места по ширине, сколько доступно (равномерно распределено между всеми элементами / контейнерами в строка). Приведенный ниже пример демонстрирует, как вы можете это сделать. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>
	<div class="container">
		<div class="row">
			<div style="background: red" class="col-md">
				hi my name is
			</div>
			<div style="background: red" class="col-md">
				hi my name is
			</div>
			<div style="background: red" class="col-md">
				hi my name is
			</div>
			<div style="background: red" class="col-md">
				hi my name is
			</div>
			<div style="background: red" class="col-md">
				hi my name is
			</div>
			<div style="background: green" class="col-md-12">
				this is next row
			</div>

		</div>
	</div>
</body>
</html>

Обновление: Вы также можете сделать это без col-md-12. 

    .col-md:nth-child(5){
        flex: 0 0 100%;
    }

Чтобы растянуть col-md в положении от 5 до 100% .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...