我使用 Bootstrap 3 制作了一個用于顯示在線商店購物產品的布局，它看起來像這樣：
[![捕獲][1]][1]
如您所見，膠片容器和分隔線之間存在間隙，我需要消除此間隙。所以Films容器會粘在右側。
這是代碼：
<section>
<div class="flex-kit-game-shop-main">
<!--Books -->
<div id="training-kit" style="background-color: #339966 !important;" class="">
<div class="card bg-transparent border-0 m-r-card">
<div class="">
<div class="title-tab-shop">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
...
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="latest-products">
...
</div>
<div class="tab-pane container fade" id="most-bied">
...
</div>
<div class="tab-pane container fade" id="popular-products">
...
</div>
</div>
</div>
</div>
</div>
</div>
<!--Films -->
<div id="training-kit" style="background-color: #0066ff !important;" class="" >
<div class="card bg-transparent border-0 m-r-card" >
<div class="">
<div class="title-tab-shop">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
...
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="latest-products">
...
</div>
<div class="tab-pane container fade" id="best-selling-products">
...
</div>
<div class="tab-pane container fade" id="popular-products">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
我可以通過說將Films容器元素貼在右邊，margin-right:-10px;但會影響添加的產品并使它們大于正常尺寸。
那么我怎樣才能正確地使這個Films容器在 Bootstrap 中保持正確呢？
CSS檔案：
.flex-kit-game-shop-main {
display: flex;
flex-direction: row;
}
@media screen and (max-width: 1200px) {
.flex-kit-game-shop-main {
flex-direction: column;
}
}
uj5u.com熱心網友回復：
轉到您的 css 檔案。找到“.flex-kit-game-shop-main”選擇器。可能，您的頂級父 div 元素的顯示值是“flex”（display:flex;）。如果是這樣，我建議您研究 css 中“flexbox”的概念。然后，你就會知道你應該做什么。
uj5u.com熱心網友回復：
這里更好的選擇是使用floatCSS 中的屬性
選擇要對齊到一側的框，然后添加float: left;還記得清除浮動，如果以后不想進一步使用它，為此添加clear: both;
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/380546.html