Html 如何在 Bootstrap 中创建取消按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33485113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 18:26:49  来源:igfitidea点击:

How to create a Cancel button in Bootstrap

htmlformstwitter-bootstrap-3cancel-button

提问by H. Ferrence

I have the following Bootstrap markup:

我有以下 Bootstrap 标记:

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="username">Username</label>
  <div class="col-md-4">
  <input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
  </div>
</div>

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
  </div>
</div>

When I click the Create Profilebutton the form works fine letting me know that certain fields are "Required". But when I click the Cancelbutton I cannot leave the form due to incomplete required fields.

当我单击Create Profile按钮时,表单工作正常,让我知道某些字段是“必需的”。但是当我点击Cancel按钮时,由于不完整的必填字段,我无法离开表单。

Is there a form cancel button capability in Bootstrap?

Bootstrap 中是否有表单取消按钮功能?

回答by Adrian Chrostowski

Change your code to the following:

将您的代码更改为以下内容:

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <a href="/link-to/whatever-address/" id="cancel" name="cancel" class="btn btn-default">Cancel</a>
  </div>
</div>

回答by Emmanuel Aninze

simply set the type attribute to reset as shown below;

只需将 type 属性设置为 reset ,如下所示;

<button type="reset" class="btn btn-default pull-right">Cancel</button>

<button type="reset" class="btn btn-default pull-right">Cancel</button>