引导网格系统没有显示正确的列划分

2022-01-30 14:52:18 标签 htmlcss

你好上面剪短故事在酒吧“奥德市场员工”是下面的一个div坳md 12每个div坳md 6左边照片(蓝色衬衫)div都好第二div(黄色衬衫)你可以看到旁边有很多空格填充和保证金或有关什么?

                            <div class="col-md-6">
                          <div class="product-item">
                           <a href="#"><img src="'.$img.'" height="370px" width="270px" alt="">
                           <div class="down-content">
                            <center><strong>'.$firstname.' &nbsp '.$lastname.'</strong><small>('.$ID.')</small></center>
                             </div>
                              <br>
                              <div>
                              <ul>
                              <li><strong>PerHour:</strong>?'.$perhour.'</li>
                              <li><strong>Residence:</strong>'.$residence.'</li>
                              <li><strong>PIN:</strong>'.$pin.'</li>
                              </div>
                              <div>
                        <a href="editEmployeeForm.php?id='.$ID.'">
                         <button class="btn btn-secondary" type="button" class="filled-button" class="editBtn">Edit</button>
                         </a>
                         <form action="updateEmployee.php" method="post">
                         <input type="hidden" name="id" value="'.$ID.'">
                         <fieldset>
                         <button type="submit" name="employeeDel" id="form-submit" class="btn btn-danger">Delete</button>
                         </fieldset>
                         </form>
                            </div>
                          </div>
                        </div>

###你的代码非常不清楚。尝试格式化代码。这里我给你一些信息。为了创建引导网格,你必须创建row div作为网格的父div

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

作为你的代码,你给一个图像宽度。这就是为什么你可以理解网格是否包含全宽。你可以删除它给宽度100%。

<img src="'.$img.'" height="370px" width="270px" alt="">

在您的代码中,您不提供空标记。请完成它。并遵循引导程序文档。

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码