文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么‘col md-6’在中间有太多的空隙？

问为什么‘col md-6’在中间有太多的空隙？
EN

Stack Overflow用户
提问于 2021-11-14 09:07:57
回答 2查看 68关注 0票数 0

我试图与bootstrap类并排显示4个div，但不幸的是，我在中间(每个div的右侧)有太多的空间，而且也没有对齐到中心。我希望它们居中对齐，中间有很小的空间。请帮帮忙。

​

代码语言：javascript
复制
<html>
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <style>
     .student-blocks {
       padding: 1rem;
       box-shadow: 0 0 10px gray;
       max-width: 9rem;
       text-align: center;
     }
   </style>
   <body>
      <section>
         <div class="container">
            <div class="row">
               <div class="col-md-6">
                  <div class="row">
                     <div class="col-6">
                        <div class="student-blocks">
                           <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                           <p>Students</p>
                        </div>
                     </div>
                     <div class="col-6">
                        <div class="student-blocks">
                           <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                           <p>Students</p>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="row">
                     <div class="col-6">
                        <div class="student-blocks">
                           <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                           <p>Students</p>
                        </div>
                     </div>
                     <div class="col-6">
                        <div class="student-blocks">
                           <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                           <p>Students</p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
   </body>
</html>

​

css
twitter-bootstrap
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-11-14 18:37:05

所以我对你的HTML做了一些修改以得到你想要的结果。为了使它们在同一行上，我将它们更改为.col-3，以跨越缺省的每行12列。12/3 =每行4个。您只需将所需的col大小放回到每行两个的col-6中，就可以将其放到新的一行中，等等。

我在您的容器和justify-content: center中添加了一个flex display，以便所有内容都居中。

​

代码语言：javascript
复制
.student-blocks {
  padding: 1rem;
  box-shadow: 0 0 10px gray;
  max-width: 9rem;
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
}

/* change padding to change spacing */

div.col-3 {
  flex: 0 0 auto;
  width: 25%;
  padding: 10px;
}
代码语言：javascript
复制
<html>
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <body>
        <section>
         <div class="container">
            <div class="row">
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
            </div>
        </div>
        </section>
   </body>
</html>

​

你可以简单地改变你的CSS选择器div.col-6上的padding来改变你想要的间距。

要消除空格，只需使padding: 0;如下所示：

​

代码语言：javascript
复制
.student-blocks {
  padding: 1rem;
  box-shadow: 0 0 10px gray;
  max-width: 9rem;
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
}

div.col-3 {
  flex: 0 0 auto;
  width: 25%;
  padding: 0px;
}
代码语言：javascript
复制
<html>
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <body>
        <section>
         <div class="container">
            <div class="row">
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
            </div>
        </div>
        </section>
   </body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2021-11-14 11:56:07

如果您正在尝试将4个div并排放置在一行中，请尝试以下模板。

代码语言：javascript
复制
<body>
  <section>
    <div class="container">
      <div class="row">

            <div class="col">
              <div class="student-blocks">
                <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                <p>Students</p>
              </div>
            </div>
            <div class="col">
              <div class="student-blocks">
                <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                <p>Students</p>
              </div>
            </div>

            <div class="col">
              <div class="student-blocks">
                <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                <p>Students</p>
              </div>
            </div>
            <div class="col">
              <div class="student-blocks">
                <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                <p>Students</p>
              </div>
            </div>
      </div>
    </div>

  </section>
</body>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69961658

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档