Question

我的问题如下：如何将表格行放入可以使用data-target的按钮中，这样我就可以控制例如旋转木马。我想要它，所以每一行都会让旋转木马跳到不同的画面。

任何人都可以帮我吗？我真的很感激。

我有一些简单的旋转木马代码：

<div class="container">
    <div class="row justify-content-center">
        <!--Carousel-->
        <div class="col-xs-12 col-lg-8">
            <div id="carousel" class="carousel" data-ride="carousel">
                <div class="carousel-inner" style="margin-bottom: -2%;">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="Bilder/Placeholder_Grundriss.jpg" alt="A1">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="Bilder/Placeholder_Grundriss2.jpg" alt="A2">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="Bilder/Placeholder_Grundriss.jpg" alt="B1">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

和一些简单的表

<div class="row justify-content-center">
    <!--carousel End-->
    <div class="col-xs-12 col-lg-10 " style="padding-top:5%;padding-bottom:5%;">
        <div class="table-responsive">
            <table class="table-hover table-bordered">
                <thead>
                    <tr>
                        <th>bla</th>
                        <th>bla</th>
                        <th>bla</th>
                        <th>bla</th>
                    </tr>
                </thead>
                <body>
                    <tr>
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                    </tr>
                    <tr>
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                    </tr>
                    <tr>
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                    </tr>
                    <tr>
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

我不明白你的意思＆＃34;如何将表格排成一个按钮？＆＃34;。我只是理解你想用表格行来控制carousel的图片。您可以将data-target和data-slide-to属性添加到表格行，单击表格行时，将更改轮播的图片。您可以执行以下操作：

<tr data-target="#carousel" data-slide-to="0">
     <td>bla</td>
     <td>bla</td>
     <td>bla</td>
     <td>bla</td>
 </tr>
 <tr data-target="#carousel" data-slide-to="1">
      <td>bla</td>
      <td>bla</td>
      <td>bla</td>
      <td>bla</td>
 </tr>
 <tr data-target="#carousel" data-slide-to="2">
      <td>bla</td>
      <td>bla</td>
      <td>bla</td>
      <td>bla</td>
 </tr>
 <tr  data-target="#carousel" data-slide-to="1">
      <td>bla</td>
      <td>bla</td>
      <td>bla</td>
      <td>bla</td>
</tr>

点击表格行，数据 - 幻灯片 - 将显示您的轮播图像，无论您提供什么图像编号。

表格拖入Bootstrap

1 个答案: