使用Bootstrap 3中的同一行将选择下拉列表中的按钮和表单保留

问题描述

我努力保留按钮，并且在Bootstrap 3中的同一行上使用< select> 标签（包括其标签）的表单。表单呈现时，它似乎在表单之前添加换行符。以下是我到目前为止的情况（）：

 < div class =container> 
< div class =row> 
< button class =btn btn-default> Test 1< / button> 
< button class =btn btn-default>测试2< /按钮> 
< form role =formclass =form-inline> 
< div class =form-group> 
< label for =selectUser>选择：< / label> 
< select id =selectUserclass =form-control selectWidth> 
< option class =>一个< / option> 
< option class =>两个< / option> 
< option class =>三< / option> 
< / select> 
< / div> 
< div class =btn-group> 
< button class =btn btn-default> Test 3< / button> 
< / div> 
< / form> 
< / div> <！ - 结束行 - > 
< / div> <！ - 结束容器 - > 
  

我认为 class =form-inline会保持它在同一行。不幸的是，这是它如何呈现：

这是一个我在我想要的图像编辑程序中创建的模型它看起来像：

我故意选择使用< select> 元素，而不是Bootstrap下拉菜单，因为移动设备上的界面是最佳的（列表将会非常大，并且尝试通过< select> 元素）。

我发现了类似的问题，但大多数都没有解决< select> 标签，或者是Bootstrap（2.x）的旧版本。任何帮助将不胜感激。

谢谢！ 前两个按钮不在窗体标记内。

看起来 form-inline 没有为标签定义样式，所以添加一个左侧的float float padding并将select的宽度设置为auto。

 < div class =container> 
< div class =row> 
< form role =formclass =form-inline> 
< button class =btn btn-default> Test 1< / button> 
< button class =btn btn-default>测试2< /按钮> 
< div class =form-group> 
< label for =selectUserstyle =float：left; padding：6px 12px 2px 12px;>选择：< / label> 
 < option class =>一个< / option> 
< option class =>两个< / option> 
< option class =>三< / option> 
< / select> 
< / div> 
< div class =btn-group> 
< button class =btn btn-default> Test 3< / button> 
< / div> 
< / form> 
< / div> <！ - 结束行 - > 
< / div> <！ - 结束容器 - > 
  

I'm struggling to keep buttons, and a form with a <select> tag (including its label) all on the same row in Bootstrap 3. Whenever the form is rendered, it seems to add a line break before the form. Here's what I have put together so far (http://www.bootply.com/98022):

<div class="container">
    <div class="row">
      <button class="btn btn-default">Test 1</button>
      <button class="btn btn-default">Test 2</button>
      <form role="form" class="form-inline">
      <div class="form-group">
        <label for="selectUser">Select:</label>
        <select id="selectUser" class="form-control selectWidth">
          <option class="">One</option>
          <option class="">Two</option>
          <option class="">Three</option>
        </select>
      </div>
      <div class="btn-group">
        <button class="btn btn-default">Test 3</button>
      </div>
      </form>
    </div> <!-- End Row -->
</div> <!-- End Container -->

I thought that the class="form-inline" would keep it on the same row. Unfortunately, this is how it renders:

This is a mock-up I created in an image editing program of what I'd like it to look like:

I have deliberately chosen to use the <select> element instead of Bootstrap dropdowns, as the interface on mobile devices is optimal (the list will be quite large and trying to select the correct option on a small screen is easier with a form <select> element).

I found similar questions, but most either don't address the <select> tag within a form, or are for older versions of Bootstrap (2.x). Any help would be greatly appreciated.

Thanks!

解决方案

Your first two button are not inside the form tag.

It seems form-inline does not define styles for labels, so add a left float some padding and set the width of the select to auto.

<div class="container">
    <div class="row">
    <form role="form" class="form-inline">
      <button class="btn btn-default">Test 1</button>
      <button class="btn btn-default">Test 2</button>
      <div class="form-group">
        <label for="selectUser" style="float:left;padding: 6px 12px 2px 12px;">Select:</label>
        <select id="selectUser" style="width:auto;" class="form-control selectWidth">
          <option class="">One</option>
          <option class="">Two</option>
          <option class="">Three</option>
        </select>
      </div>
      <div class="btn-group">
        <button class="btn btn-default">Test 3</button>
      </div>
      </form>
    </div> <!-- End Row -->
</div> <!-- End Container -->

这篇关于使用Bootstrap 3中的同一行将选择下拉列表中的按钮和表单保留的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！