Question

我正在尝试在我的网站上在普通容器之间的容器中使用全宽元素。

是否可以始终（甚至调整网站大小）将容器流体中的内容与容器中的内容对齐？

我有atm的示例：

我想要实现的目标：

<!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>

Answer 1

您可以将偏移量类用于列，使其位于左侧，并根据需要增加偏移量宽度。希望对您有帮助。

<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>

Answer 2

您能否使用下面的代码进行检查，您必须更改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>

Answer 3

您可以将 max-width 内的 .container-fluid CSS 属性元素设置为 .container 类。

.my-container {
    border: 1px solid blue;
    max-width: 1140px;
    margin: 0 auto;
    padding: 15px;
}

当然，那么你应该应用媒体查询。

.container{
  border: 1px solid red;
}
.container-fluid {
  border: 1px dotted black;
}
.my-container {
  border: 1px solid blue;
  max-width: 1140px;
  margin: 0 auto;
  padding: 15px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap 4 Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>

<div class="container-fluid my-3">
  <div class="my-container my-4">    
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg">Fake Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>Some Links</h3>
    <p>Lorem ipsum dolor sit ame.</p>
  </div>  
</div>

</body>
</html>

Answer 4

在.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>

如何将容器流体中的内容与Bootstrap 4上的容器对齐？

4 个答案: