输入组与输入字段，选择（silviomoreto）和按钮显示不正确 [英] input-group with input field, select (silviomoreto) and button not displaying correctly

查看：85
本文介绍了输入组与输入字段，选择（silviomoreto）和按钮显示不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前有一个由输入栏，选择菜单和按钮组成的输入组。

我知道您必须使用下拉菜单，而不是在bootstrap中选择，但我想避免使用JavaScript的下拉菜单。



我使用的选择菜单来自： https://silviomoreto.github.io/bootstrap-select/examples/ 所以它不是bootstrap版本，但是我在这里使用bootstrap选择这个问题。



目前选择菜单下降到输入字段下方，我不确定为什么要这样做，但我希望输入组坐在一行上。



我不想给选择一个特定的宽度，因为这不会工作，我已经尝试过，它只是产生问题，所以我希望它采取他们的默认宽度，如果可以的话。



有什么想法？

< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css><！ - 最新的编译和缩小CSS - >< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css><！ - - 最新的编译和缩小JavaScript - >< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script>< ; script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>< div class =container> <形式> < div class =form-group> < h3 id =track-record>记录< / h3> < div class =col-md-8> < div class =input-group select-group> < input type =textclass =form-control input-text input-md select-inputid =assessorplaceholder =placeholder here> < select id =year-selectclass =form-control input-group-addon> < option value =>年份< / option> < option value =1> 2014< / option> < option value =2> 2013< / option> < option value =3> 2012< / option> < option value =4> 2011< / option> < /选择> < span class =input-group-btn> <按钮类型=按钮class =btn btn-primary btn-sm btn-outline gray-outline>< span class =glyphicon glyphicon-minus>< / span>删除记录< / button> ; < /跨度> < / DIV> < / DIV> < / DIV> < / form>< / div>

解决方案

据我所知，你必须自己做这件事，我不相信Bootstrap中有任何本地支持来将多个输入字段与一个按钮进行分组。 b
$ b

其中绝大多数是基于视口定义每个输入的边界半径，因为它们放置在列（*中，其中也移除了填充以将输入保持在一起）。



以下是三个示例，具体取决于您可能希望或不希望在不同设备上处理这个问题。



（*请确保将片段打开为完整页面，然后缩小浏览器以查看更改）

工作示例：

$（'。select-group'）。selectpicker ）;

/ **下面这行是CSS仅适用于：不适用于答案** / body {padding-top：20px;}。表单，.the-form-2，.the-form-3 {padding：0 15px;} / ** CSS在此行之上仅供参考例子：与答案无关** /。no-gutter> [class * ='col-'] {padding-right：0; padding-left：0;} / ** FORM 1 ** / @ media（min-width：768px）{.the-form .form-control.new-form-control {border-top-right-radius：0; border-bottom-right-radius：0; border-right：none; } .the-form .btn-group.bootstrap-select.form-control.select-group，.the-form .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {border-radius ：0; }。表单按钮{border-top-left-radius：0;}。 border-bottom-left-radius：0; }} @ media（max-width：767px）{.the-form .btn-group.bootstrap-select.form-control.select-group，.the-form .btn-group.bootstrap-select.form-control。 select-group .dropdown-toggle {border-bottom-right-radius：0; border-right-right-radius：0; border-left-left-radius：4px; border-bottom-left-radius：4px; }。表单按钮{border-top-left-radius：0;}。 border-bottom-left-radius：0; }} / ** FORM 2 ** /。the-form-2 .form-control.new-form-control {border-top-right-radius：0; border-bottom-right-radius：0; border-right：none;}。-form-2 .btn-group.bootstrap-select.form-control.select-group，.the-form-2 .btn-group.bootstrap-select.form-control.select -group .dropdown-toggle {border-radius：0;}。-form-2按钮{border-top-left-radius：0; border-bottom-left-radius：0;} / ** FORM 3 ** / @ media（min-width：768px）{.the-form-3 .form-control.new-form-control {border-top-右半径：0; border-bottom-right-radius：0; border-right：none; } .the-form-3 .btn-group.bootstrap-select.form-control.select-group，.the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {border-radius：0; } .the-form-3按钮{border-top-left-radius：0; border-bottom-left-radius：0; }} @ media（max-width：767px）{.the-form-3 .form-control.new-form-control {border-bottom-right-radius：0;}} border-bottom-left-radius：0; border-bottom：none; } .the-form-3 .btn-group.bootstrap-select.form-control.select-group，.the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {border-bottom-right-radius：0; border-right-right-radius：0;边界顶部左半径：0; border-bottom-left-radius：4px; } .the-form-3按钮{border-top-left-radius：0; border-bottom-left-radius：0; border-right-right-radius：0; }

< link rel =stylesheettype = text / csshref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>< link rel =stylesheettype =text / csshref =https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css>< div class =container> < h1>例1< / h1> < form class =the-form> < div class =row no-gutter> < h3 id =track-record>记录< / h3> < div class =col-xs-12 col-sm-6> < input type =textclass =form-control new-form-controlid =assessorplaceholder =Placeholder> < / DIV> < div class =col-xs-6 col-sm-3> < select id =year-selectclass =form-control select-group> < option value =>年份< / option> < option value =1> 2014< / option> < option value =2> 2013< / option> < option value =3> 2012< / option> < option value =4> 2011< / option> < /选择> < / DIV> < div class =col-xs-6 col-sm-3> < button type =buttonclass =btn btn-primary btn-block> < span class =glyphicon glyphicon-minus>< / span>删除记录< /按钮> < / DIV> < / DIV> < / form>< / div>< hr>< div class =container> < h1>实施例2< / h1> < form class =the-form-2> < div class =row no-gutter> < h3 id =track-record>记录< / h3> < div class =col-xs-7 col-sm-6> < input type =textclass =form-control new-form-controlid =assessorplaceholder =Placeholder> < / DIV> < div class =col-xs-3 col-sm-3> < select id =year-selectclass =form-control select-group> < option value =>年份< / option> < option value =1> 2014< / option> < option value =2> 2013< / option> < option value =3> 2012< / option> < option value =4> 2011< / option> < /选择> < / DIV> < div class =col-xs-2 col-sm-3> < button type =buttonclass =btn btn-primary btn-block> < span class =glyphicon glyphicon-minus>< / span> < span class =hidden-xs>删除记录< / span> < /按钮> < / DIV> < span class =help-block text-right visible-xs>删除记录< / span> < / DIV> < / form>< / div>< hr>< div class =container> < h1>实施例3< / h1> < form class =the-form-3> < div class =row no-gutter> < h3 id =track-record>记录< / h3> < div class =col-xs-12 col-sm-6> < input type =textclass =form-control new-form-controlid =assessorplaceholder =Placeholder> < / DIV> < div class =col-xs-6 col-sm-3> < select id =year-selectclass =form-control select-group> < option value =>年份< / option> < option value =1> 2014< / option> < option value =2> 2013< / option> < option value =3> 2012< / option> < option value =4> 2011< / option> < /选择> < / DIV> < div class =col-xs-6 col-sm-3> < button type =buttonclass =btn btn-primary btn-block> < span class =glyphicon glyphicon-minus>< / span>删除记录< /按钮> < / DIV> < / DIV> < / form>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js>< / script>< ; script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>< script src =https：//cdnjs.cloudflare。 COM / AJAX /库/自举选/ 1.10.0 / JS /自举-select.min.js>< /脚本>


I currently have an input-group consisting of an input field, a select menu and a button.

I understand that you have to use a dropdown menu instead of select in bootstrap, but I want to refrain from using the dropdown with javascript.

The select menu I am using is from: https://silviomoreto.github.io/bootstrap-select/examples/ so its not the bootstrap version, however I am using the bootstrap select here for this question.

At the moment the select menu drops below the input field and I am not sure why its doing this, but I want the input-group to sit on one line.

I dont want to give the select a specific width because that wont work, I have tried it and it just creates problems, so I want it to take their default width if it can.

Any ideas?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <form>

    <div class="form-group">
      <h3 id="track-record">Record</h3>
      <div class="col-md-8">
        <div class="input-group select-group">
          <input type="text" class="form-control input-text input-md select-input" id="assessor" placeholder="placeholder here">

          <select id="year-select" class="form-control input-group-addon">
            <option value="">Year</option>
            <option value="1">2014</option>
            <option value="2">2013</option>
            <option value="3">2012</option>
            <option value="4">2011</option>
          </select>


          <span class="input-group-btn">
         <button type="button" class="btn btn-primary btn-sm btn-outline grey-outline"><span class="glyphicon glyphicon-minus"></span>Delete record</button>
          </span>
        </div>
      </div>

    </div>

  </form>
</div>

解决方案

As far as I can tell you'll have to do this on your own, I don't believe there is any native support in Bootstrap for grouping multiple input fields with a button.

The vast majority of this is defining the border radius of each input based on the viewport since they's placed inside columns (*which also have the padding removed to keep the inputs together).

Here are three examples depending on how you may or may not want to handle this on different devices.

(*Make sure to open the Snippet to Full Page then reduce the Browser to see the changes)

Working Examples:

$('.select-group').selectpicker();

/**CSS BELOW THIS LINE IS FOR EXAMPLE ONLY: NOT RELEVANT TO ANSWER**/

body {
  padding-top: 20px;
}
.the-form,
.the-form-2,
.the-form-3 {
  padding: 0 15px;
}
/**CSS ABOVE THIS LINE IS FOR EXAMPLE ONLY: NOT RELEVANT TO ANSWER**/

.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
/**FORM 1**/

@media (min-width: 768px) {
  .the-form .form-control.new-form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }
  .the-form .btn-group.bootstrap-select.form-control.select-group,
  .the-form .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-radius: 0;
  }
  .the-form button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media (max-width: 767px) {
  .the-form .btn-group.bootstrap-select.form-control.select-group,
  .the-form .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .the-form button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
/**FORM 2**/

.the-form-2 .form-control.new-form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.the-form-2 .btn-group.bootstrap-select.form-control.select-group,
.the-form-2 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
  border-radius: 0;
}
.the-form-2 button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/**FORM 3**/

@media (min-width: 768px) {
  .the-form-3 .form-control.new-form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group,
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-radius: 0;
  }
  .the-form-3 button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media (max-width: 767px) {
  .the-form-3 .form-control.new-form-control {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
  }
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group,
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 4px;
  }
  .the-form-3 button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
  }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<div class="container">
  <h1>Example 1</h1>
  <form class="the-form">
    <div class="row no-gutter">
      <h3 id="track-record">Record</h3>

      <div class="col-xs-12 col-sm-6">
        <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder">
      </div>

      <div class="col-xs-6 col-sm-3">
        <select id="year-select" class="form-control select-group">
          <option value="">Year</option>
          <option value="1">2014</option>
          <option value="2">2013</option>
          <option value="3">2012</option>
          <option value="4">2011</option>
        </select>
      </div>

      <div class="col-xs-6 col-sm-3">
        <button type="button" class="btn btn-primary btn-block">
          <span class="glyphicon glyphicon-minus"></span> Delete Record
        </button>
      </div>

    </div>

  </form>
</div>
<hr>
<div class="container">
  <h1>Example 2</h1>
  <form class="the-form-2">
    <div class="row no-gutter">
      <h3 id="track-record">Record</h3>

      <div class="col-xs-7 col-sm-6">
        <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder">
      </div>

      <div class="col-xs-3 col-sm-3">
        <select id="year-select" class="form-control select-group">
          <option value="">Year</option>
          <option value="1">2014</option>
          <option value="2">2013</option>
          <option value="3">2012</option>
          <option value="4">2011</option>
        </select>
      </div>

      <div class="col-xs-2 col-sm-3">
        <button type="button" class="btn btn-primary btn-block">
          <span class="glyphicon glyphicon-minus"></span>  <span class="hidden-xs">Delete Record</span>
        </button>
      </div>

      <span class="help-block text-right visible-xs">Delete Record</span>

    </div>

  </form>
</div>
<hr>
<div class="container">
  <h1>Example 3</h1>
  <form class="the-form-3">
    <div class="row no-gutter">
      <h3 id="track-record">Record</h3>

      <div class="col-xs-12 col-sm-6">
        <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder">
      </div>

      <div class="col-xs-6 col-sm-3">
        <select id="year-select" class="form-control select-group">
          <option value="">Year</option>
          <option value="1">2014</option>
          <option value="2">2013</option>
          <option value="3">2012</option>
          <option value="4">2011</option>
        </select>
      </div>

      <div class="col-xs-6 col-sm-3">
        <button type="button" class="btn btn-primary btn-block">
          <span class="glyphicon glyphicon-minus"></span> Delete Record
        </button>
      </div>

    </div>

  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

这篇关于输入组与输入字段，选择（silviomoreto）和按钮显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆