Bootstrap 按钮和输入框，并排答案

【问题标题】：Bootstrap Button and input box , side by sideBootstrap 按钮和输入框，并排
【发布时间】：2017-09-04 21:21:11
【问题描述】：

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

我在互联网上搜索了一些仅在元素分组中的示例。

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>

【问题讨论】：

标签： html twitter-bootstrap css

【解决方案1】：

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

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

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

.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>

【讨论】：

抱歉回复晚了，非常感谢您的回答，这对我很有帮助。但我不想更改 css，因为它可能会影响整个项目，所以有什么方法只能影响这个特定的块..
当然，只需给您的块一个自定义 CSS 类并将样式应用于该类。

【解决方案2】：

对于跨浏览器，您可以简单地使用 inline-block

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

【讨论】：