使用浮球时按钮坏了吗?

时间:2016-06-04 13:24:12

标签: html css

我有两种形式需要并排。我可以让它们向左浮动但是当我使用左浮动时按钮被禁用。我试过显示内联,但不起作用。我试过跨度而且不起作用。不知道为什么按钮停止了。这是一个示例表单

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

1 个答案:

答案 0 :(得分:1)

这会起作用吗?

我更改了这个(有一个类型,应该是inlinestyle="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>