Question

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

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

我可以最好地保留按钮的原始引导样式，但是获得表单提交的功能而无需修改bootstraps自己的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>

Bootstrap - 在实现表单

1 个答案: