css - Moodle 中的 Bootstrap 表

Question

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

<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>

但它不起作用。任何帮助将非常感激。网站网址为 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首先在此处引导表。