是否可以使col-md-3更靠近或彼此居中？

本文介绍了是否可以使col-md-3更靠近或彼此居中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以使col-md-3彼此更接近？
这是我的代码：

Is it possible to make col-md-3 closer to each other?Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
<style>

body {
  margin-top: 50px;
}

</style>

  </head>
  <body>

<div class="container">
  <div class="row">
      <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
      </div>
      <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
      </div>
      <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
      </div>
  </div>
</div>
  </body>
</html>

不在中心是否有人知道如何解决？

Is not at the center does anyone know how to fix it?

您的帮助非常感谢！

推荐答案

是的，但是为此你需要重写样式的Bootstrap的列。默认情况下，Bootstrap的列的样式为 float：left 。我们需要用 float 替换 display：inline-block ，然后我们可以轻松地使它们在中心 text-align：center 。

Yes, but for this you need to override styling for Bootstrap's columns. By default Bootstrap's columns are styled as float: left. We need to replace float with display: inline-block then we can make them in center easily with text-align: center.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.center-align .row {
  letter-spacing: -4px;
  text-align: center;
  font-size: 0;
}
.center-align [class*='col-md'] {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0;
  text-align: left;
  font-size: 16px;
  float: none;
}

<div class="container center-align">
  <div class="row">
    <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
    </div>
    <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
    </div>
    <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
    </div>
  </div>
</div>

注意：不要忘记通过创建元素 inline-block 删除额外的空间。

Note: Don't forget to remove extra space that comes by making an element inline-block.

这篇关于是否可以使col-md-3更靠近或彼此居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！