Question

我正在尝试使表单响应并将其加载到div中，以便表单采用div的形状而不会浮动。我已经将row-fluid应用于表单元素和div，它仍然没有响应，如图所示

var div_container = document.getElementById('active-container');
                var users = '';
                var formy = '';
                for (var i = 0; i < json.length; i++) {
                    users += '<span style="font-size:27px;"><strong>' + json[i].email + '</strong></span><br/>' + '<form class="row-fluid" style="margin-top:0px;" method="post" action="search"><input class="row-fluid" type="text" value="'+json[i].access+'" name="searchName" id="searchName" readonly/><button class="btn btn-success" type="submit"><i class="icon-circle-arrow-right icon-large"></i>FETCH</button></form>' + '<hr>';
                 }

EDITTED：这是包含表单标记的div

<div style="overflow: auto; overflow-x: auto; height:420px; color:#4b4f54; font-size:13px;" id="active-container">
        </div>

请如何将响应变为div并将按钮附加到输入类型

的右侧

Answer 1

使用.form-inline使表单响应，右键使用按钮.pull-right类。

如果您想将输入和按钮放在一边，只需使用它： -

<div class="col-sm-6 col-lg-4">
    <div class="form-group">
        <label class="col-sm-4 control-label">DOB - Age:</label>
            <div class="col-md-7 col-xs-4 input-group">
                <input type="text" id="" class="form-control" name="" style="margin-left:15px;" value="" tabindex="-1" />
                    <span class="input-group-btn" style="">
                       <button class="btn btn-success" type="submit"><i class="fa fa-angle-right" style="margin-left:15px"></i>Button</button>
                    </span>
            </div>
    </div>
</div>

Answer 2

为什么不使用像这样简单的东西。不需要JS。

已更新：已添加内联样式。你也可以在内联样式中调整％，我发现它很有用。

标记

<div class="container">
<h2>Form name</h2>
    <form>
        <div class="form-group">
            <input style="display:inline; width:75%" type="email" class="form-control" id="email" placeholder="Enter email">
            <button style="width:24%"type="submit" class="btn btn-success pull-right">Fetch</button>
        </div>
    </form>
</div>

CSS：根据需要调整最大宽度或完全删除。

.container {
  margin: 20px;
  padding: 10px 10px;
  max-width: 500px;
  background: #FDFDFD;
  box-shadow: 2px 2px #D8D8D8;
}

JsFiddle Demo

Float left Demo

Answer 3

将类.form-inline添加到元素

使表单响应div

3 个答案: