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

Question

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

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

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

原始引导代码：

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