Bootstrap Moodle 中的表格

Question

您好，我目前正在为客户的 Moodle 站点工作。我们正在尝试在主页着陆页上获得响应 table。我无法将整个 Bootstrap 框架复制到站点中，因为它与其他 Moodle 库冲突。我刚刚复制并粘贴了 table 元素，从 bootstrap CSS .container 开始并将其添加到 Moodle 自定义 CSS space .然后我添加了以下内容：

<div class="container">
  <div class="col-12 col-sm-12 col-lg-12">
        <div class="table-responsive">
              <table class="table">
                    <tbody>
                          <tr>
                                <td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
                                     <a href="http://moodle.ranzco.edu/course/view.php?id=98" class="nounderlineyellow"><i class="fa fa-medkit" aria-hidden="true"></i></a><span style="font-size: x-large;"><br />Trainees</span>
                                </td>
                                <td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
                                      <p><a href="http://moodle.ranzco.edu/course/view.php?id=102" class="nounderlineyellow"><i class="fa fa-user-md" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">Term Supervisors Clinical Tutors</span></p>
                                </td>
                                <td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
                                      <a href="http://moodle.ranzco.edu/course/view.php?id=101" class="nounderlineyellow"><i class="fa fa-graduation-cap" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">Examiners</span>
                                </td>
                          </tr>
                          <tr>
                                <td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
                                      <a href="http://moodle.ranzco.edu/course/view.php?id=97" class="nounderlineyellow"><i class="fa fa-eye" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">Mentors</span>
                                </td>
                                <td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
                                      <a href="http://moodle.ranzco.edu/course/view.php?id=100" class="nounderlineyellow"><i class="fa fa-users" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">Fellows</span>
                                </td>
                                <td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
                                      <a href="http://moodle.ranzco.edu/course/view.php?id=99" class="nounderlineyellow"><i class="fa fa-globe" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">International Medical Graduates</span>
                                </td>
                          </tr>
                    </tbody>
              </table>
        </div>
  </div>

但它不起作用。任何帮助将非常感激。站点 URL 是 Moodle Site

Answer 1

你的第二行 <div class="col-12 col-sm-12 col-lg-12"> 应该是 <div class="col-md-12 col-sm-12 col-lg-12"> bootstrap 中的 col-12 没有。

您也可以先try here bootstrap 表格。

Bootstrap Moodle 中的表格

Bootstrap tables in Moodle

css

moodle

bootstrap-table