Как выровнять содержимое внутри контейнера-жидкости с контейнером на начальной загрузке 4? - PullRequest
Новая
       6

Как выровнять содержимое внутри контейнера-жидкости с контейнером на начальной загрузке 4?

0 голосов
/ 06 ноября 2019

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

Можно ли всегда выравнивать (даже изменять размер веб-сайта) контент, находящийся внутри контейнера? жидкость с содержимым внутри контейнера?

Пример того, что у меня есть атм: enter image description here

Чего я хочу достичь: enter image description here

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-12">
					<h1>Website title</h1>
				</div>
				<div class="col-12">
					<p>Website description</p>
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="row">
				<div class="col-12 p-0" style="background-color: thistle; border: 1px solid black;">
					<div id="box" style="margin: 30px; border: 1px solid black;">
						<h2>Full width content</h2>
					</div>
					
				</div>
			</div>
		</div>

		<div class="container">
			<div class="row">
				<div class="col-12">
					<p>Some more website description</p>
				</div>
			</div>
		</div>

		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	</body>
</html>

Ответы [ 3 ]

2 голосов
/ 06 ноября 2019

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

<div class="container-fluid">
            <div class="row">
                <div class="col-md-8 offset-md-4 p-0" style="background-color: thistle; border: 1px solid black;">
                    <div id="box" style="margin: 30px; border: 1px solid black;">
                        <h2>Full width content</h2>
                    </div>

                </div>
            </div>
        </div>
0 голосов
/ 06 ноября 2019

Можете ли вы проверить с помощью приведенного ниже кода, что вам нужно изменить структуру html и поместить контейнер в контейнерную жидкость, как упоминалось в @Paulie_D. Надеюсь, это сработает для вас. 

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Website title</h1>
      </div>
      <div class="col-12">
        <p>Website description</p>
      </div>
    </div>
  </div>

  <div class="container-fluid">
  <div class="full-width-section"  style="background-color: thistle; border: 1px solid black;">
    <div class="container">
    <div class="row">
      <div class="col-12">
        <div id="box" style="margin: 30px 0px; border: 1px solid black;">
          <h2>Full width content</h2>
        </div>
    </div>
      </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <p>Some more website description</p>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>
0 голосов
/ 06 ноября 2019

Добавьте еще .container внутри вашего .container-fluid, и это даст вам большую часть пути.

Затем настройте поля / отступы, как требуется. 

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Website title</h1>
      </div>
      <div class="col-12">
        <p>Website description</p>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="container">
    <div class="row">
      <div class="col-12 p-0" style="background-color: thistle; border: 1px solid black;">
        <div id="box" style="margin: 30px; border: 1px solid black;">
          <h2>Full width content</h2>
        </div>

      </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <p>Some more website description</p>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

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

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

...