如何减少col-md-4 div之间的水平空间？

Question

HTML

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="content">1x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">1x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">1x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="content">2x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">2x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">2x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="content">3x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">3x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">3x3</div>
            </div>
        </div>
    </div>

CSS

.container {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.content {
    background-color: #1A1919;
    color: white;    
    height: 400px;
    width: 300px;
}

.row{
    padding: 5px;  
}

我设法通过向行添加填充来在列之间创建垂直空间。但现在内容之间的水平空间太多了。如何配置它们之间的间距？

Answer 1

你可以删除那里的很多东西并简化它，使其响应宽度设定余量：

＆＃13;

＆＃13;

.contents {
  background-color: black;
  color: white;
  height: 500px;
  
  margin: 20px 0px;
}

＆＃13;

<div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-4">
                <div class="contents">1x1</div>
            </div>
            <div class="col-md-4">
                <div class="contents">1x2</div>
            </div>
            <div class="col-md-4">
                <div class="contents">1x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="contents">2x1</div>
            </div>
            <div class="col-md-4">
                <div class="contents">2x2</div>
            </div>
            <div class="col-md-4">
                <div class="contents">2x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="contents">3x1</div>
            </div>
            <div class="col-md-4">
                <div class="contents">3x2</div>
            </div>
            <div class="col-md-4">
                <div class="contents">3x3</div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

那个大的水平空间是因为fixed width of the content class，如果你删除它，你会看到它增长。 您可以设置内容的宽度（％）或为内容类添加边距。

＆＃13;

＆＃13;

.container {
  text-align: center;
}

.content {
  background-color: #1A1919;
  color: white;
  height: 400px;
}

.row{
padding:15px;
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 col4">
      <div class="content">1x1</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">1x2</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">1x3</div>
    </div>
  </div>
  <div class="row ">
    <div class="col-md-4 col4">
      <div class="content">2x1</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">2x2</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">2x3</div>
    </div>
  </div>
  <div class="row col4 col4">
    <div class="col-md-4 col4">
      <div class="content">3x1</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">3x2</div>
    </div>
    <div class="col-md-4">
      <div class="content">3x3</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

CSS Grid实现您想要的布局：

＆＃13;

＆＃13;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 5px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:80%;
}
.item {
  background-color: gray;
  text-align: center;
  font-size: 30px;
  min-height:100px;
  max-width: 350px;
  
}

＆＃13;

<div class="grid-container">
  <div class="item">1x1</div>
  <div class="item">1x2</div>
  <div class="item">1x3</div>  
  <div class="item">2x1</div>
  <div class="item">2x2</div>
  <div class="item">2x3</div>
  <div class="item">3x1</div>
  <div class="item">3x2</div>
  <div class="item">3x3</div> 
</div>

＆＃13;

＆＃13;

＆＃13;

使用flexbox：

＆＃13;

＆＃13;

.flex-container {
  display: flex;
  /*Generates a flexbox layout with default flex direction as row */
  width: 100%;
  /* Not really required */
  align-items: center;
  /*Aligns contents vertically */
  justify-content: center;
  /*Aligns contents horizontally */
  text-align: center;
  /*Aligns further text in the center */
}

.item {
  background-color: gray;
  text-align: center;
  font-size: 30px;
  min-height: 400px;
  width: 300px;
  margin: 5px;
}

＆＃13;

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div class="flex-container">
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex-container">
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用 float：left; ，类内容，如下所示：

＆＃13;

＆＃13;

.container {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.content {
    float: left;
    background-color: #1A1919;
    color: white;    
    height: 400px;
    width: 300px;
}

.row{
    padding: 5px;  
}

＆＃13;

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="content">1x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">1x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">1x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="content">2x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">2x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">2x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="content">3x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">3x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">3x3</div>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果我正确地阅读了您的请求，您只是想知道如何让它看起来像是在页面中央的方框，它们是均匀分布的。看看这是否是您正在寻找的：

.container {
text-align: center;
display: flex;
flex-direction: column;
}

.content {
background-color: #1A1919;
color: white;    
height: 400px;
width: 300px;
}


.col-md-4 {
margin: 5px -10px 0px -4px;;
}

使用数字直到找到所需的位置。

虽然我强烈建议您将除了col-md-4之外的类添加到框中，这将阻止col-md-4的这一新设置影响此引导类的任何未来使用。

换句话说，

。

CSS：

.container {
text-align: center;
display: flex;
flex-direction: column;
}

.content {
background-color: #1A1919;
color: white;    
height: 400px;
width: 300px;
}


.box-move {
margin: 5px -10px 0px -4px;;
}

和HTML：

<div class="container">
    <div class="row">
        <div class="col-md-4 box-move">
            <div class="content">1x1</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">1x2</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">1x3</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 box-move">
            <div class="content">2x1</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">2x2</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">2x3</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 box-move">
            <div class="content">3x1</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">3x2</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">3x3</div>
        </div>
    </div>
</div>