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>

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

Bootstrap - Retain Button Styling when implementing Forms

css

forms

button

twitter-bootstrap