是否可以使col-md-3更靠近或彼此居中？ [英] Is it possible to make col-md-3 closer or center to each other?
本文介绍了是否可以使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更靠近或彼此居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
