Question

我对Bootstrap编码很陌生，并且在路上遇到了麻烦。我把这个代码放在下面，我得到一个列而不是3 * 2网格，这是我认为的。这里的任何帮助将不胜感激。

   <div class="col-12 col-sm-12 col-lg-12">

<div class="col-4 col-sm-4 col-lg-4">
    <a href="http://www.google.com" class="nounderlineyellow">
        <i class="fa fa-medkit" aria-hidden="true"></i></a></br>
        <span style="font-size: x-large;"><br />Trainees</span>
</div>

<div class="col-4 col-sm-4 col-lg-4">
    <a href="#" 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>
</div>

<div class="col-4 col-sm-4 col-lg-4">
    <a href="#" class="nounderlineyellow">
        <i class="fa fa-graduation-cap" aria-hidden="true"></i></a></br>
        <span style="font-size: x-large;">Examiners</span>
</div>

<div class="col-4 col-sm-4 col-lg-4">
    <a href="#" class="nounderlineyellow">
        <i class="fa fa-eye" aria-hidden="true"></i></a></br>
        <span style="font-size: x-large;">Mentors</span>
</div>

<div class="col-4 col-sm-4 col-lg-4">
    <a href="#" class="nounderlineyellow"><i class="fa fa-users" aria-hidden="true"></i></a></br>
    <span style="font-size: x-large;">Fellows</span>
</div>

<div class="col-4 col-sm-4 col-lg-4">
    <a href="#" class="nounderlineyellow"><i class="fa fa-globe" aria-hidden="true"></i></a></br>
    <span style="font-size: x-large;">International Medical Graduates</span>
</div>

Answer 1

在y中，每个Bootstrap分为row个分区。您可以使用任何组合，例如

但您已使用4+4+4=12 1+2+9=12 6+6=12 ------。因此，您必须考虑Bootstrap网格系统的分类。

您可以阅读this和this以便澄清。然后我想你将能够解决你的问题。

Answer 2

您错过了<div class="row">包裹您的列，除非您在bootstrap.less中修改了@grid-columns，然后自行编辑，您已经过多了列。正如上面提到的Black Bird，您的列需要添加到12。

无论如何，首先要做的是替换

<div class="col-12 col-sm-12 col-lg-12">

带

<div class="row">

列不起作用

2 个答案: