Question

我在bootstrap中有一个表格如下：

<table class="table table-striped">
<thead>
<tr>
  <th>Date</th>
  <th>Name</th>
  <th>LastName</th>
  <th>Color</th>
   <th>Car</th>
  <th>Year</th>
  <th>Price</th>

 </tr>
 </thead>
 <tbody>
<tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>
    <tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>
    <tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>
    <tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>
    <tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>

 </tbody>
 </table>

我想要做的是在断点上，比如一个小于768px的屏幕，显示如下表：

DATE:01/05/2017
car:BMW

然后点击此行显示：

 Name:Dan
 LastName:Green
 Color:blue
 Year:2016

有没有办法通过bootstrap实现这一目标？或者我可能不应该在表格中包含所有内容，而是在列表中包含元素，并将它们显示为表格（单元格）并在较小的屏幕上显示以对齐它们？因为起初我想创建两个视图并根据屏幕大小显示/隐藏它们，因为我不知道如何这样做。我是初学者，所以我提前道歉。我不知道哪种是最佳做法以及如何实现这一点，最好只使用css。而JS只在点击隐藏并显示该部分。

这是一个js小提琴Bootstrap Table

感谢任何帮助。

Answer 1

对于布局，您应该查看引导网格。 https://getbootstrap.com/docs/4.0/layout/grid/

它在技术上并不使用“table”而是div，并且您可以设置每个屏幕大小需要div的列数。当我开始使用bootstap时，我看到了这个很好的youtube教程，它解释得很好https://www.youtube.com/watch?v=g3LRU3JF-rQ

较小屏幕上的表格显示为列表，其中多列折叠并显示在手风琴上

1 个答案: