Bootstrap-选择和按钮彼此相邻 [英] Bootstrap - select and button next to each other

问题描述

我有一个< select> 和一个彼此相邻的按钮，并希望使用bootstrap对其进行样式设置.没有类的 Select 看起来像这样:

I have a <select> and a button next to each other and wanted to style them with bootstrap. Select without class looks like this:

select 看起来像这样:

注意，该按钮现在位于 下.我不确定哪个CSS属性对此负责.我应该更改什么，在选择旁边有一个按钮?

Notice, that the button is now under select. I'm not sure, which CSS property is responsible for this. What should I change, to have button next to the select?

推荐答案

遵循Boostrap语法:

Following Boostrap syntax :

您应在表单中添加 form-inline 类，请参见

You should add form-inline class to your form, see the official doc

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

这篇关于Bootstrap-选择和按钮彼此相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！