输入框组 带按钮插件

W3CSchool > bootstrap3中文手册 > Bootstrap 输入框组 > 输入框组 带按钮插件

按钮插件

您也可以把按钮作为输入框组的前缀或者后缀元素,这个时候您就不是添加 .input-group-addon class。
您需要使用 class .input-group-btn 来包裹按钮。
这是必需的,因为默认的浏览器样式不会被重写。

下面的实例演示了这点:

为输入框组添加按钮需要额外添加一层嵌套:

<div class="row">

  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->

</div><!-- /.row -->

上面实例中不是加入 .input-group-addon,而是添加 .input-group-btn 来包裹按钮元素。因为不同浏览器的默认样式无法被统一的重新赋值,所以才需要这样做。

CTRL + D 收藏本页

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)