html - 使用向左浮动时按钮坏了？

Question

我有两个表格需要并排显示。我可以让它们向左浮动，但是当我使用向左浮动时按钮被禁用。我试过 display-inline 但没有用。我已经尝试过 span，但没有用。不知道为什么按钮停止工作。这是一个示例表单

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

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