如何在引导程序中对齐列中的控件？

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

想要将图像居中，非常简单，引导程序包含两个类.center-block和text-center，在图像为BLOCK元素的情况下使用前者，例如。将img-responsive类添加到img使img成为块元素，如果您知道如何在Web控制台中导航并查看元素的应用样式，则应该知道这一点。

不想使用类，没有问题，这里是CSS引导程序使用，你可以创建一个自定义类或为该元素编写CSS规则以匹配引导类。

 // 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
}