3更靠近或彼此居中

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更靠近或彼此居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 04:21