html - 如何在 Bootstrap 中对齐列内的控件？

Question

这是我的代码。

<div class="col-lg-4">
  <label>ID Expire</label>
  <div class="row ">
    <div class="col-lg-5">
      <input type="text" class="form-control input-sm" id="TextIDExpire" />
    </div>
    <div class="col-sm-4">
      <button class="btn btn-default form-control " id="BtnBrowsePhoto"> Browse <i class="glyphicon glyphicon-folder-open"></i> </button>
    </div>
    <div class="col-lg-3">
      <button class="btn bg-yellow form-control" id=" btnviewphoto"> View <i class="glyphicon glyphicon-eye-open"></i> </button>
    </div>
  </div>
</div>

预期输出是

但是我在控件之间有很多空白。我想做什么。请帮助我

Answer 1

想把图片居中，很简单，bootstrap自带了两个类.center-block和text-center，如果你的图片是BLOCK 元素，例如。将 img-responsive 类添加到您的 img 使 img 成为 block 元素，如果您知道如何在 Web 控制台中导航并查看对元素应用的样式，您应该知道这一点.

不想用类，没问题，这里是CSS bootstrap使用的，你可以自定义类或者为元素写一个CSS规则来匹配bootstrap类。

 // in case your dealing with a block element apply this to the element itself 
.center-block {
   margin-left:auto;
   margin-right:auto;
   display:center;
}
// in case your dealing with a inline element apply this to the parent 
.text-center {
   text-align:center
}