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

Question

我尝试将 Slick 与我的 Bootstrap 4 网站集成，但这让我很难过。我的目标是将我的文本放在缩略图上。它以某种方式移动到缩略图下方。知道为什么吗？

我的问题

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>

CSS

.tb__thumbnail {
    width: 100%;
}

JavaScript

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

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

Answer 1

我会在 ul 中创建您的列，每个 .tb__item 作为 li。让我知道您的情况如何？

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

    })

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

.tb__thumbnail {
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>

<div class="row">
  <div class="col-12 tb-items">
     <ul class="tb-items">
        <li class="tb__item">
          <div class="row">
             <div class="col-5">
               <img class="tb__thumbnail" src="https://images.unsplash.com/photo-1488393660112-976f752342de?dpr=1&auto=format&fit=crop&w=568&h=539&q=60&cs=tinysrgb">
             </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>
       </li>
       <li class="tb__item">
          <div class="row">
             <div class="col-5">
               <img class="tb__thumbnail" src="https://images.unsplash.com/photo-1488393660112-976f752342de?dpr=1&auto=format&fit=crop&w=568&h=539&q=60&cs=tinysrgb">
             </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>
       </li>
    </ul>                 
 </div>
</div>