Css错误显示内联表

Question

我试图使用库引导选择器但是我的类输入组有一个问题，它包含＆＃34;显示内联表＆＃34;。选定的单词不在输入字段中。我想保留这个类而不修改＆＃34;显示内联表＆＃34;

我尝试了一些显示初始或阻止儿童，但它不起作用。

没有课程＆＃34;输入组＆＃34;

使用class＆＃34; input-group＆＃34;但是场地增长

寻求帮助。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css" rel="stylesheet" />
<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.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<div class="container">
  <div class="col-sm-12 col-md-2">
    <div class="panel" id="liste_diffusion">
      <label> test </label>
      <div class="input-group">
        <select class="selectpicker" data-style="btn-primary" multiple>
          <option>PHP PHP PHP PHP PHP PHP PHP PHP</option>
          <option>CSS CSS CSS CSS CSS CSS CSS CSS CSS </option>
          <option>HTML HTML HTML HTML HTML HTML </option>
        </select>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我添加信息来解决问题：

最大宽度为70％时发生了什么：

.bootstrap-select{
      max-width: 70%;
    }

没有选定的元素：

所选元素字段继续增长：

我无法使用px来响应大小。

Answer 2

使用此风格

.panel .input-group {
  display: flex;
}
.bootstrap-select {
   flex: 1;
}

.panel .input-group {
  display: flex;
}
.bootstrap-select {
   flex: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<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.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>

<div class="container">
  <div class="col-sm-12 col-md-2">
    <div class="panel" id="liste_diffusion">
      <label> test </label>
      <div class="input-group">
        <select class="selectpicker" data-style="btn-primary" multiple>
          <option>PHP PHP PHP PHP PHP PHP PHP PHP</option>
          <option>CSS CSS CSS CSS CSS CSS CSS CSS CSS </option>
          <option>HTML HTML HTML HTML HTML HTML </option>
        </select>
      </div>
    </div>
  </div>
</div>