addon

addon

关注
发信
关注(28)粉丝(399)

带引导选择的输入组插件

本文介绍了带引导选择的输入组插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试将 Label 2 与 bootstrap-select 一起使用，但它看起来与 bootstrap(Label 1em>) 一个.怎么可能让下面代码中的两个标签看起来一样?

<html lang="zh-cn"><头><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="description" content=""><meta name="author" content=""><link rel="快捷图标" href="../../docs-assets/ico/favicon.png"><title>测试</title><link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" ><link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css"><link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet"><身体><div class="容器"><div class="col-lg-6"><div class="input-group"><span class="input-group-addon">标签 1</span><input type="text" class="form-control" name="snpid" placeholder="Test"><span class="input-group-btn"><button class="btn btn-default" type="submit">GO!</button></span></div><!--/input-group --></div><!--/.col-lg-6 --><div><BR/><人力资源><div class="容器"><form class="form-inline"><div class="form-group"><span class="input-group-addon">标签 2</span>

<div class="form-group"><select id="lunch" class="selectpicker" data-live-search="true" title="请选择午餐..."><option>热狗、薯条和苏打水</option><option>汉堡、奶昔和微笑</option><option>糖、香料和所有美好的东西</option><option>婴儿背肋</option><option>一个非常长的选项，用于以内联形式说明实时搜索的问题</option></选择>

</表单><div><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script><脚本>$('.selectpicker').selectpicker();

解决方案

来自 Bootstrap docs:

通过在任何基于文本的 之前、之后或两侧添加文本或按钮来扩展表单控件.使用带有 .input-group-addon 或 .input-group-btn 的 .input-group 将元素添加或附加到单个 .form-control.

您需要将 select 和 .input-group-addon 包裹在 .input-group 中:

<span class="input-group-addon">标签 2</span><select id="lunch" class="selectpicker form-control" data-live-search="true" title="请选择午餐..."><option>热狗、薯条和苏打水</option><option>汉堡、奶昔和微笑</option><option>糖、香料和所有美好的东西</option><option>婴儿背肋</option><option>一个非常长的选项，用于以内联形式说明实时搜索的问题</option></选择>

检查一下:

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><div class="容器"><div class="col-lg-6"><div class="input-group"><span class="input-group-addon">标签 1</span><input type="text" class="form-control" name="snpid" placeholder="Test"><span class="input-group-btn"><button class="btn btn-default" type="submit">GO!</button></span>

<br><小时><div class="容器"><form class="form-inline"><div class="input-group"><span class="input-group-addon">标签 2</span><select id="lunch" class="selectpicker form-control" data-live-search="true" title="请选择午餐..."><option>热狗、薯条和苏打水</option><option>汉堡、奶昔和微笑</option><option>糖、香料和所有美好的东西</option><option>婴儿背肋</option><option>一个非常长的选项，用于以内联形式说明实时搜索的问题</option></选择>

</表单>

I tried to use Label 2 with bootstrap-select, but it looks different to the bootstrap (Label 1) one. How is it possible to get the two labels in the code below look the same?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Test</title>

    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">

  </head>

  <body>

    <div class="container">
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-addon">Labe 1</span>
          <input type="text" class="form-control" name="snpid" placeholder="Test">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">GO!</button>
          </span>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    <div>
    <BR/>
    <HR>

  <div class="container">
    <form class="form-inline">
      <div class="form-group">
        <span class="input-group-addon">Label 2</span>
      </div>
      <div class="form-group">
        <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
          <option>Hot Dog, Fries and a Soda</option>
          <option>Burger, Shake and a Smile</option>
          <option>Sugar, Spice and all things nice</option>
          <option>Baby Back Ribs</option>
          <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
        </select>
      </div>
    </form>
    <div>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
    <script>
      $('.selectpicker').selectpicker();
    </script>
  </body>
</html>
解决方案

From Bootstrap docs:

You need to wrap the select and .input-group-addon in a .input-group:

<div class="input-group">
  <span class="input-group-addon">Label 2</span>
  <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
    <option>Hot Dog, Fries and a Soda</option>
    <option>Burger, Shake and a Smile</option>
    <option>Sugar, Spice and all things nice</option>
    <option>Baby Back Ribs</option>
    <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
  </select>
</div>

Check it out:

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">Labe 1</span>
      <input type="text" class="form-control" name="snpid" placeholder="Test">
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit">GO!</button>
      </span>
    </div>
  </div>
  <br>
  <hr>
  <div class="container">
    <form class="form-inline">
      <div class="input-group">
        <span class="input-group-addon">Label 2</span>
        <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
          <option>Hot Dog, Fries and a Soda</option>
          <option>Burger, Shake and a Smile</option>
          <option>Sugar, Spice and all things nice</option>
          <option>Baby Back Ribs</option>
          <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
        </select>
      </div>
    </form>
  </div>
</div>

这篇关于带引导选择的输入组插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 04:18
Powered by LMLPHP ©2024 addon 0.040852