Как выровнять элементы внутри контейнера, сохраняя полную ширину при изменении размера, чтобы соответствовать контейнеру на bootstrap 4? - PullRequest
Новая
       5

Как выровнять элементы внутри контейнера, сохраняя полную ширину при изменении размера, чтобы соответствовать контейнеру на bootstrap 4?

0 голосов
/ 28 февраля 2020

Мне нужен контейнер полной ширины с изображениями, которые можно прокручивать, тогда у меня есть другой контент на моем веб-сайте, который находится внутри контейнера ...

Мой вопрос: есть ли способ установить padding-left на моем элементе внутри контейнера-флюида, который соответствует содержимому снаружи (внутри контейнера), когда вы изменяете размер сайта?

Я имею в виду всегда выравнивать отступ и контейнер

пример:

вот мой код атм : 

<!DOCTYPE html>
<html>
	<head>
	  <title></title>

	  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	</head>
	<body>
		<style type="text/css">
			.container {
				max-width: 1450px;
				background: lightblue;
			}
			.container-fluid {
				background-color: wheat;
			}
			ul {
				display: flex;
				overflow-x: scroll;
			}
	    	li {
				list-style: none;
	    		float: left;
	    	}
	    </style>

		<div class="container">
			<div class="row">
				<div class="col-12">
					<h1>Carousel Header</h1>
				</div>
			</div>
		</div>
		<div class="container-fluid px-0">
			<ul>
				<li><img src="https://i.picsum.photos/id/229/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/230/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/231/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/232/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/233/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/234/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/235/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/236/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/237/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/238/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/239/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/240/200/300.jpg"></li>
			</ul>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-12">
					<h2>TEXT</h2>
				</div>
				<div class="col-12">
					<p>some text</p>
				</div>
			</div>
		</div>
		<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	</body>
</html>

Ответы [ 2 ]

1 голос
/ 28 февраля 2020 

<!DOCTYPE html>
<html>
	<head>
	  <title></title>

	  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	</head>
	<body>
		<style type="text/css">
			.container {
				max-width: 1450px;
				background: lightblue;
			}
			.container-fluid {
				background-color: wheat;
			}
			ul {
				display: flex;
				overflow-x: scroll;
        margin:0px;
        padding:0px;
			}
	    	li {
				list-style: none;
	    		float: left;
	    	}
	    </style>

		<div class="container">
			<div class="row">
				<div class="col-12">
					<h1>Carousel Header</h1>
				</div>
			</div>
		</div>
		<div class="container-fluid p-0">
			<ul>
				<li><img src="https://i.picsum.photos/id/229/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/230/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/231/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/232/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/233/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/234/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/235/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/236/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/237/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/238/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/239/200/300.jpg"></li>
				<li><img src="https://i.picsum.photos/id/240/200/300.jpg"></li>
			</ul>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-12">
					<h2>TEXT</h2>
				</div>
				<div class="col-12">
					<p>some text</p>
				</div>
			</div>
		</div>
		<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	</body>
</html>

Используйте этот код, надеюсь, что вы хотите, как это.

0 голосов
/ 28 февраля 2020

Я думаю, что макет, который вы предлагаете, не является ни удобным для пользователя, ни хорошим дизайном пользовательского интерфейса. Вы нарушаете визуальное пустое пространство, которое создают левые и правые поля. Этот факт приводит к запутанному пользовательскому интерфейсу и опыту.

Кроме того, использование container-fluid для создания контейнера полной ширины не имеет смысла, если вы не собираетесь использовать row и col внутри. Просто объявите div.

Я предлагаю установить вашу карусель внутри container.

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

Нет похожих вопросов

...