30

Bootstrap-selectでLabel 2を使用しようとしましたが、 bootstrap ( Label 1 )とは見た目が異なります。以下のコードの 2 つのラベルを同じにするにはどうすればよいでしょうか?

<!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>
4

3 に答える 3

19

選択ボタンがそれぞれの角で丸くなるように、CSS を追加して caeth のソリューションを変更しました。

HTML

<form class="form-inline">
    <div class="input-group">
        <span class="input-group-addon">Label</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>

CSS

.input-group > .input-group-btn:last-child > .selectpicker {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.input-group > .input-group-btn:first-child > .selectpicker {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

こちらをご覧ください：http://jsfiddle.net/xr4uofje/130/

于 2015-04-16T04:12:05.567 に答える