[英]How to align content inside container-fluid with a container on bootstrap 4?
我試圖在我的網站上在普通容器之間的容器流體中放置一個全寬元素。
是否可以始終（甚至調整網站大小）將容器流體內的內容與容器內的內容對齊？
例如我有什么自動取款機：
我想要達到的目標：
<: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>
您可以對列使用偏移 class 使其位於左側，根據需要增加偏移寬度。 我希望這會對你有所幫助。
<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>
您能否使用以下代碼檢查您必須更改 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>
在您的.container-fluid中添加一個額外的.container ，這將幫助您完成大部分工作。
然后根據需要調整邊距/填充。
<: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 -.container-fluid inside.container-fluid
[英]Bootstrap - .container-fluid inside .container-fluid
如何對齊容器流體內的項目以在調整大小時保持全寬以匹配引導程序 4 上的容器？
[英]How to align items inside container-fluid keeping full-width on resize to match a container on bootstrap 4?
Bootstrap-在容器流體內垂直和水平居中放置內容
[英]Bootstrap - Center content vertically and horizontally inside container-fluid
將容器類嵌套在Bootstrap 3中的容器流體類中？
[英]Nesting a container class inside a container-fluid class in Bootstrap 3?
Bootstrap 4基本布局嵌套容器內container-fluid
[英]Bootstrap 4 basic layout nested container inside container-fluid
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.