我有两种形式需要并排。我可以让它们向左浮动但是当我使用左浮动时按钮被禁用。我试过显示内联,但不起作用。我试过跨度而且不起作用。不知道为什么按钮停止了。这是一个示例表单
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div style="display:incline;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
这会起作用吗?
我更改了这个(有一个类型,应该是inline
)style="display:incline;...
到style="float:left;...
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
但是我可以建议在两个表单容器上使用style="display: inline-block;...
,这里使用CSS样式(首选)而不是内联样式。
.formwrapper {
display:inline-block;
border:1px solid blue;
width:200px;
}
<div class="formwrapper">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="formwrapper">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>