Question

我想对齐两个元素。有没有办法在bootstrap的帮助下达到这个目的？如果我浮动元素并使输入元素的宽度更小，它就可以工作。但那不是我想要使用的解决方案。是否有响应式的引导方式来执行此操作？

带有两个元素的

Fiddle我希望彼此对齐（按钮和输入）。

 <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <button type="button" class="btn btn-default btn-sm adminButton">
       <span class="table-add glyphicon glyphicon-plus"></span> Add columns
    </button>
    <input class="form-control input-sm" id="inputsm" type="text">  

    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

Answer 1

尝试bootstrap addon

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div>

Answer 2

添加row＆amp; col-＆amp; <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-3"> <button type="button" class="btn btn-default btn-sm adminButton"><span class="table-add glyphicon glyphicon-plus"></span> Add columns</button> </div> <div class="col-sm-8"> <input class="form-control input-sm" id="inputsm" type="text"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div>类

$total         = $woocommerce->cart->get_total();

https://jsfiddle.net/e0cr1nL2/107/

水平对齐两个bootstrap元素

2 个答案: