Question

我使用css，尝试自定义上传文件..我想要这样的东西：

但由于某些原因，当我进入bootstrap模式时，我的布局分为3行，如下所示：

我做错了什么？为什么我不能只用一行显示它？

HTML：

<button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
  <span class="glyphicon glyphicon-chevron-up"></span>Importar</button>
<div class="modal" id="uploadModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="overflow: hidden">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Add new File</h4>

      </div>
      <div class="modal-body col-md-12" id="modal-body">
        <div id="upload">
          <div class="col-md-12">
            <div id="drop">
              <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
              <input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
              <span class="input-group-btn">
                                                <button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
                                            </span>
            </div>
          </div>
          <div class="fileupload-buttonbar">
            <div>
              <button type="submit" class="btn btn-success start">
                <i class="glyphicon glyphicon-upload"></i><span>Start upload</span>

              </button>
              <button type="reset" class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-upload"></i><span>Clear upload</span>

              </button>
              <button type="reset" class="btn btn-danger cancel">
                <i class="glyphicon glyphicon-ban-circle"></i><span>Cancel All</span>

              </button>
            </div>
          </div>

          <ol class="files upload-files-list"></ol>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Fiddle Demo

我搜索Bootstrap documentation但是我得到了类似的结果，我尝试使用给定的代码，但我得到相同的结果：

Answer 1

这似乎有效：

input-group

Demo

请注意课程input-group-append，input-group-prepend和package main import ( "strconv" "encoding/binary" "fmt" ) func main() { /* goal: convert a bit string (ex "10110110") to a byte array */ bitString := "00000000000000000000000100111000100001100000000000000000000000000000000000000000000000000000000000000000000000000000000000000011" bitNum, err := strconv.ParseUint(bitString, 2, 128) // turn my 128-bit bitstring into an int if err != nil { panic(err) // currently panics with "value out of range" } // convert my integer to a byte array // code from https://stackoverflow.com/questions/16888357/convert-an-integer-to-a-byte-array bs := make([]byte, 128) // allocate memory for my byte array binary.LittleEndian.PutUint64(bs, bitNum) // convert my bitnum to a byte array fmt.Println(bs) }

Answer 2

将您的图标，输入，按钮包装到input-group课程中。

<div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
  <input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
  <span class="input-group-btn"><button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button></span>
</div>

你错误地使用了col-md-12，在它之前使用row类。

<强> Updated Fiddle

上传文件在一行

2 个答案: