Question

我刚刚开始的初学者

我试图在youtube

中使用bootstrap 4关注创建论坛的视频

但是表格响应不起作用

我认为我的代码与视频相同，但浏览器不一样

my broswer

browser in youtube

这是我的餐桌。我希望有人帮助我..

感谢

<table class="table table-striped table-bordered table-responsive">
    <thead class="thead-light">
        <tr>
            <th scope="col" class="forum-col">Forum</th>
            <th scope="col">Topics</th>
            <th scope="col">Posts</th>
            <th scope="col" class="last-post-col">Last post</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>
                <h3 class="h5"><a href="#0">Forum name</a></h3>
                <p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
            </td>
            <td>
                <div>5</div>
            </td>
            <td>
                <div>18</div>
            </td>
            <td>
                <h4 class="h6"><a href="#0">Post name</a></h4>
                <div>by <a href="#0">Author name</a></div>
                <div>05 Apr 2017, 20:07</div>
            </td>
        </tr>
     <tbody>

Answer 1

您的第一个TD未设置为自动换行。您可以将以下CSS声明添加到TD元素以解决此问题：

word-break:break-all;

Answer 2

由于td内容长度如此之高。你需要打破单词以获得响应表

看看这个小提琴JSFiddle

CSS：

td{
  word-break:break-all;
}

Answer 3

你应该将表包装在element中，并将.table-responsive类从标记中取出，并将该类放在包装div元素中。 .table-responsive类应包括断点大小，例如.table-responsive-sm

<div class="table-responsive-sm">

  <table class="table table-dark table-hover">
    <thead>
    <tr>
      <th>.</th>

在bootstrap 4中表响应无效

3 个答案: