如何在 Bootstrap 中正确粘贴 div答案

【问题标题】：How to stick a div to right in Bootstrap properly如何在 Bootstrap 中正确粘贴 div
【发布时间】：2022-01-05 12:15:36
【问题描述】：

我使用 Bootstrap 3 制作了一个展示在线商店购物产品的布局，它看起来像这样：

如您所见，Films 容器和分隔线之间存在间隙，我需要消除此间隙。所以 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>

我可以通过说margin-right:-10px; 将 Films 容器元素粘贴到右侧，但会影响添加的产品并使它们大于正常大小。

那么我怎样才能正确地让这个 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;
  }
}

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这里更好的选择是在 CSS 中使用 float 属性

选择要对齐到一边的框，然后添加float: left; 如果以后不想进一步使用它，请记得清除浮动，添加clear: both;

【讨论】：

【解决方案2】：

转到您的 css 文件。找到“.flex-kit-game-shop-main”选择器。可能，您的顶级父 div 元素的显示值是“flex”(display:flex;)。如果是的话，我建议你研究一下 CSS 中“flexbox”的概念。然后，你就会知道你应该做什么。

【讨论】：

是的，它设置为display:flex;