引导按钮和输入框，并排

任何人都可以请建议/纠正我如何对齐或排列按钮和输入框，而不需要在引导分组。引导按钮和输入框，并排

我在互联网上搜索了几个例子，只是在元素分组。

的jsfiddle：https://jsfiddle.net/erama035/p9dagmL3/3/

<div class="container"> 
    <div class="row"> 

     <div class="col-xs-5 col-sm-5 col-md-5"> 
      <button class="btn btn-default col-sm-2 col-md-2">add</button> 
      <input class="form-control col-md-3 col-sm-2"/> 
     </div> 

     <div class="col-xs-7 col-sm-7 col-md-7"> 
      <button class="btn btn-default col-md-2">remove</button> 
      <input class="form-control col-md-5"/> 
     </div> 

    </div> 
</div>

来源

2017-09-04 ramki

快速的方法是，简单地使用Flexbox父<div>。这会将子元素转换为默认情况下并排排列的弹性项目。

.container > .row > div { 
    display: flex; 
}

正确的方法是使用Bootstraps预定义的类进行分组。

.container>.row>div { 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-5 col-sm-5 col-md-5"> 
 
     <button class="btn btn-default">add</button> 
 
     <input class="form-control" /> 
 
    </div> 
 
    <div class="col-xs-7 col-sm-7 col-md-7"> 
 
     <button class="btn btn-default">remove</button> 
 
     <input class="form-control" /> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-09-04 21:31:02 andreas

对不起已故的答复，我真的很感激你的答案这真的帮助了我。但我不想改变CSS，因为它可能会影响整个项目，所以有什么办法可以只影响这个特定的块.. – ramki

当然，只要给你的块一个自定义的CSS类，并将样式应用到类。 – andreas

为跨浏览器，你可以简单的使用inline-block的

.btn,.form-control{display: inline-block; width: auto;}

来源

2017-09-04 21:32:59

引导按钮和输入框，并排

回答

相关问题