[英]How to align items inside container-fluid keeping full-width on resize to match a container on bootstrap 4?
我想要一個帶有可以滾動圖片的全寬容器，然后我的網站上還有其他內容位於容器內...
我的問題是：當您調整網站大小時，是否有任何方法可以在容器流體內的我的項目上設置與外部（容器內部）內容相匹配的 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>
<!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>
使用此代碼希望它是你想要的。
我認為您提出的布局既不用戶友好，也不是一個好的 UI 設計。 您正在打破左右邊距創建的視覺空白。 這一事實導致了令人困惑的用戶界面和體驗。
此外，如果你不打算在里面使用row和col ，那么使用container-fluid來擁有一個全寬的容器是沒有意義的。 只需聲明一個div 。
我建議將您的旋轉木馬安裝在container 。
如何將容器流體中的內容與引導程序 4 上的容器對齊？
[英]How to align content inside container-fluid with a container on bootstrap 4?
盡管主體容器為非流體，但使Footer全寬（容器流體）
[英]Make Footer full-width (container-fluid) despite body container non-fluid
Bootstrap -.container-fluid inside.container-fluid
[英]Bootstrap - .container-fluid inside .container-fluid
了解自舉容器流體的工作原理，以及如何使容器內的部分填充整個寬度
[英]Understanding how bootstrap container-fluid works and how to make a section inside the container fill the entire width
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.