使HTML表单元素符合要求

Question

我正在使用一些引导元素和一些按钮，并且在将它们全部显示在一行中时会出现问题！我有类似的东西：

<span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled style="display: inline" ></span>
<span><input type="button" id="get_file" class="btn btn-primary" value="Browse" style="display: inline"></span>
<span><input type="button" id="get_file" class="btn btn-success" value="Upload" style="display: inline"></span>
<input type="file" id="my_file" accept=".zip" style="display: none">

这应该基本上显示一个带有两个按钮的文本字段，我得到一个输出，如：

我想要的是两个按钮也在同一行......

Answer 1

查看Bootstrap文档： http://getbootstrap.com/components/#input-groups-buttons

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

Answer 2

试试这段代码：

<form class="form-horizontal form-inline">
        <span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled ></span>
        <span><input type="button" id="get_file" class="btn btn-primary" value="Browse"></span>
        <span><input type="button" id="get_file" class="btn btn-success" value="Upload"></span>
        <input type="file" id="my_file" accept=".zip" style="display: none" >
    </form>

Answer 3

<form class="form-inline">
<span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled></span>
<span><input type="button" id="get_file" class="btn btn-primary" value="Browse"></span>
<span><input type="button" id="get_file2" class="btn btn-success" value="Upload"></span>
<input type="file" id="my_file" accept=".zip" style="display: none">

试一试。

检查此document。