Boostrap网格系统无法正常工作

Question

我正在尝试使用行和列使用引导程序在产品页面上定位产品，但由于我在页面中添加了类别栏，因此它不再起作用了。

如图所示，产品堆放在类别栏下，另一个产品位于类别栏旁边。但我希望产品能够在类别栏旁边，我不知道我做错了什么

所以基本上我想在侧边栏旁边的每一列上都有4个产品。 这是我的代码：

    <?php   include_once ('templates/header.php');  ?>

<!-- Alle cadeaus gele title bovenaan pagina -->

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 bg-warning" style="font-size:25px">
            <center>Alle cadeaus</center>
        </div>
        </div>
</div>

 <hr />

<br>

<!-- Cadeau categorie side menu -->
<div class="container-fluid">
    <div class="row">
            <div class="col-md-4">
                <div id="categorymenu">
                    <center>  <h3>Categorieën</h3> </center>
                    <ul class="list-group">
                        <?php foreach (get_categories_h() as $category) : ?>
                            <li class="list-group-item">
                                <a href="#"> <?php echo $category['name']; ?></a>
                                </a> 
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>




<!-- Laat cadeau zien op alle cadeaus pagina -->

<?php foreach($products as $product) : ?>
    <div class="col-md-2">
        <div id="product">
        <a href="<?php echo base_url() ?>/Product/details/<?php echo $product['product_id']; ?>">
          <img src="<?php echo base_url(); ?>upload/<?php echo $product['product_foto_thumb']; ?>">
        </a>
        <div class="product_naam"><?php echo $product['product_naam']; ?></div>
        <div class="ophaal_plaats">
           <?php  echo $product['ophaal_plaats']; ?>
        </div>
        <div class="aangeboden_door">
            <p>Aangeboden door: Peter</p>
              </div>
        </div>
        </div>
        </div>
         </div>
<?php endforeach; ?>





<div class="clearfix"></div>

 <?php   include_once ('templates/footer.php');  ?>

css信息：

#categorymenu {
    color:black;
    background-color: #D9e5f7;
    padding:10px;
    width:250px;

}

#categorymenu ul li a {
    color:black !important;
}

#categorymenu ul li {
    list-style: none;
}

#product {
    background-color:#ccdcff!important;
    width:176px!important;
    height:230px!important;
    padding:4px;
}

Answer 1

如果你总是想在“categoriesie”的右侧有4个产品，我认为你需要在php foreach循环中将col-md-3更改为col-md-2。总需要12，所以4 + 4 * 2 = 12.此外，你永远不应该在你的CSS中使用！important。

Answer 2

检查这个html结构

#categorymenu {
    color:black;
    background-color: #D9e5f7;
    padding:10px;
    width:250px;

}

#categorymenu ul li a {
    color:black !important;
}

#categorymenu ul li {
    list-style: none;
}

#product {
    background-color:#ccdcff!important;
    width:176px!important;
    height:230px!important;
    padding:4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<?php   include_once ('templates/header.php');  ?>

<!-- Alle cadeaus gele title bovenaan pagina -->

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 bg-warning" style="font-size:25px">
            <center>Alle cadeaus</center>
        </div>
        </div>
</div>

 <hr />

<br>

<!-- Cadeau categorie side menu -->
<div class="container-fluid">
    <div class="row">
            <div class="col-sm-4">
                <div id="categorymenu">
                    <center>  <h3>Categorieën</h3> </center>
                    <ul class="list-group">
                        
                            <li class="col-sm-3 list-group-item">
                                <a href="#"> <?php echo $category['name']; ?></a>
                            </li>
                            
                        
                    </ul>
                </div>
            </div>




<!-- Laat cadeau zien op alle cadeaus pagina -->

        <div class="col-sm-8 row">
    <div class="col-sm-3">
        <div id="product">
        <a href="<?php echo base_url() ?>/Product/details/<?php echo $product['product_id']; ?>">
          <img src="<?php echo base_url(); ?>upload/<?php echo $product['product_foto_thumb']; ?>">
        </a>
        <div class="product_naam"><?php echo $product['product_naam']; ?></div>
        <div class="ophaal_plaats">
         
        </div>
        <div class="aangeboden_door">
            <p>Aangeboden door: Peter</p>
              </div>
        </div>
        </div>
        
        <div class="col-sm-3">
  <div id="product">
    <a href="<?php echo base_url() ?>/Product/details/<?php echo $product['product_id']; ?>">
          <img src="<?php echo base_url(); ?>upload/<?php echo $product['product_foto_thumb']; ?>">
        </a>
    <div class="product_naam">
      <?php echo $product['product_naam']; ?>
    </div>
    <div class="ophaal_plaats">

    </div>
    <div class="aangeboden_door">
      <p>Aangeboden door: Peter</p>
    </div>
  </div>
</div>
<div class="col-sm-3">
  <div id="product">
    <a href="<?php echo base_url() ?>/Product/details/<?php echo $product['product_id']; ?>">
          <img src="<?php echo base_url(); ?>upload/<?php echo $product['product_foto_thumb']; ?>">
        </a>
    <div class="product_naam">
      <?php echo $product['product_naam']; ?>
    </div>
    <div class="ophaal_plaats">

    </div>
    <div class="aangeboden_door">
      <p>Aangeboden door: Peter</p>
    </div>
  </div>
</div>
<div class="col-sm-3">
  <div id="product">
    <a href="<?php echo base_url() ?>/Product/details/<?php echo $product['product_id']; ?>">
          <img src="<?php echo base_url(); ?>upload/<?php echo $product['product_foto_thumb']; ?>">
        </a>
    <div class="product_naam">
      <?php echo $product['product_naam']; ?>
    </div>
    <div class="ophaal_plaats">

    </div>
    <div class="aangeboden_door">
      <p>Aangeboden door: Peter</p>
    </div>
  </div>
</div>
        </div>
        </div>
         </div>


<div class="clearfix"></div>

 <?php   include_once ('templates/footer.php');  ?>

Answer 3

您可以尝试使用以下代码吗？我还没有测试过，但你可以尝试一下。

@ECHO off
SET workingDirectory=%~dp0
SET fileName=%1
echo using %workingDirectory% as working directory
gcc -c %fileName%.c
gcc -o %fileName% %fileName%.o -mwindows
windres -o %fileName%rc.o %fileName%rc.rc
gcc -o %fileName% %fileName%.o %fileName%rc.o -mwindows

Answer 4

您必须维护col-sm和col-md。你需要保持这些平等。在顶部，您使用col-sm-4然后col-md-3没有平等分区，我无法理解。

请参阅分区的系统 -

<div class="row">
    <div class="col-md-4">

    </div>
    <div class="col-md-8">
        <div class="row">
           <div class="col-md-3">
           ...
           </div>
           <div class="col-md-3">
           ...
           </div>
          <div class="col-md-3">
           ...
           </div>
           <div class="col-md-3">
           ...
           </div>
        </div>
    </div>
</div>

在你的情况下，可能在，

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Cadeau categorie side menu -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <div id="categorymenu">
                    <center>  <h3>Categorieën</h3> </center>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="#"> Category 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#"> Category 2</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-md-8">
                <div class="col-md-3">
                    <div id="product">
                        <a href="#">
                          <img src="#">
                      </a>
                      <div class="product_naam">Pro Name</div>
                      <div class="ophaal_plaats">
                         Ophaal
                     </div>
                     <div class="aangeboden_door">
                        <p>Aangeboden door: Peter</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div id="product">
                    <a href="#">
                      <img src="#">
                  </a>
                  <div class="product_naam">Pro Name</div>
                  <div class="ophaal_plaats">
                     Ophaal
                 </div>
                 <div class="aangeboden_door">
                    <p>Aangeboden door: Peter</p>
                </div>
            </div>
        </div>        

        <div class="col-md-3">
            <div id="product">
                <a href="#">
                  <img src="#">
              </a>
              <div class="product_naam">Pro Name</div>
              <div class="ophaal_plaats">
                 Ophaal
             </div>
             <div class="aangeboden_door">
                <p>Aangeboden door: Peter</p>
            </div>
        </div>
    </div>        

    <div class="col-md-3">
        <div id="product">
            <a href="#">
              <img src="#">
          </a>
          <div class="product_naam">Pro Name</div>
          <div class="ophaal_plaats">
             Ophaal
         </div>
         <div class="aangeboden_door">
            <p>Aangeboden door: Peter</p>
        </div>
    </div>
</div>

</div>

</div>
</div>

<div class="clearfix"></div>

＆＃13;

＆＃13;

＆＃13;