Javascript 在Bootstrap 4和Slick中，为什么我的文本不在缩略图旁边？

我尝试将Slick与我的Bootstrap4网站集成，但这给了我一段艰难的时间。我的目标是将我的文本定位在缩略图的右侧。 不知怎的，它被移到了缩略图下面。知道为什么吗

我的问题

HTML

<div class="row">
    <div class="col-12 tb-items">
        <div class="row tb__item">
            <div class="col-5">
                <img class="tb__thumbnail" src="{% static "img/placeholders/fb.jpg" %}">
            </div>
            <div class="col-7">
                <a href="#">Book</a>
                <h3><a href="#">1 The Everlast Notebook</a></h3>
                <p>One smart, reusable notebook to last the rest of your life? That's not magic, that's the Everlast.</p>
                <p>by <a href="#">Andrew Noah</a></p>
                <div class="tb__votes">
                    <b>123123123</b><br>votes
                </div>
                <div class="tb__date-created">
                    <b>23</b><br>days ago
                </div>
            </div>
        </div>
    <div class="row tb__item">
        <div class="col-5">
            <img class="tb__thumbnail" src="{% static "img/placeholders/fb.jpg" %}">
        </div>
        <div class="col-7">
            <a href="#">Book</a>
            <h3><a href="#">1 The Everlast Notebook</a></h3>
            <p>One smart, reusable notebook to last the rest of your life? That's not magic, that's the Everlast.</p>
            <p>by <a href="#">Andrew Noah</a></p>
            <div class="tb__votes">
                <b>123123123</b><br>votes
            </div>
            <div class="tb__date-created">
                <b>23</b><br>days ago
            </div>
        </div>
    </div>
</div>
</div>

JAVASCRIPT

$(function () {
    $('.tb-items').slick({
        arrows: false,
    })

    $('.tb__topic').click(function () {
            $('.tb-items').slick('slickNext')
        }
    )
})

---

我将在

ul

中创建您的列，并将每个

.tb\u项目作为
li
创建。让我知道你的情况如何


$（函数（）{
美元（“.tb项目”）.slick({
箭头：错，
})
$（'.tb\u主题'）。单击（函数（）{
$（'.tb items'）.slick（'slickNext'））
}
)
})
.tb\u缩略图{
宽度：100%；
}



一个智能的、可重复使用的笔记本，可以让你的余生都用上吗？那不是魔法，那是永恒的

借

123123
投票
23天前


一个智能的、可重复使用的笔记本，可以让你的余生都用上吗？那不是魔法，那是永恒的

借

123123
投票
23天前


您确定没有任何其他CSS或div包装此文件吗？我看没问题，不用担心，现在就看。只是一瞬间而已！在HTML格式的幻灯片中使用
是常见的吗？知道是什么导致了这个问题吗？我倾向于将它们用于任何幻灯片或旋转木马，尤其是当我将它们放在一个循环中时。我认为问题是由您在
项目上的
行
引起的。引导是如此美妙，但是当你将
行
放置在
行
中，使用
容器
时，你开始得到负填充，导致内部的宽度超过100%——通常很容易被过于复杂的网格元素冲昏头脑——我一直在这样做。不管怎样，很高兴它对你有用。
$(function () {
    $('.tb-items').slick({
        arrows: false,
    })

    $('.tb__topic').click(function () {
            $('.tb-items').slick('slickNext')
        }
    )
})