css - Bootstrap - 实现表单时保留按钮样式

Question

我正在使用 Bootstrap 模板 (INSPINIA)，并将其与 PHP 集成。

所有示例数据结构都使用按钮，但为了让这些与服务器交互，我需要将它们更改为提交并将它们包装在一个表单中。

我能否最好地保留按钮的原始 Bootstrap 样式，但无需修改 Bootstrap 自己的 CSS 即可获得表单提交的功能？

原始 Bootstrap 代码:

  <div class="input-group">
       <input type="text" placeholder="Add new task. " class="input input-sm form-control">
       <span class="input-group-btn">
           <button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
       </span>
   </div>

我得到的结果:

<div class="input-group">
    <form action="index.php" method="post">
         <span class="input-group-btn">
             <input type="text" placeholder="Add new task. " name="ToDo" class="input input-sm form-control">
             <input type="submit" class="btn btn-sm btn-white" value="Add Task" name="addToDo" />
          </span>
    </form>
</div>

上面的代码看起来不一样，在较小的设备上显示出一些奇怪的行为。

Answer 1

您只需更改提交按钮的类型，就可以了:

<div class="input-group">
   <input type="text" placeholder="Add new task. " class="input input-sm form-control">
   <span class="input-group-btn">
       <button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
   </span>
</div>

您必须在 input-group 之外添加表单标签以保持样式:

<form action="index.php" method="post">
    <div class="input-group">
       <input type="text" placeholder="Add new task. " class="input input-sm form-control">
       <span class="input-group-btn">
           <button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
       </span>
    </div>
</form>