Question

我正在使用select2和bootstrap 3创建表单。单击select2选择一个项目时，水平滚动条向右扩展时出现问题。我该如何解决？

<mat-chip-list>

Answer 1

使用class="container-fluid"添加一个div并将代码放入其中

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container-fluid">
    <form id="second_form" method="post" action="" class="form-horizontal">
      <h1>ALMACEN GENERAL</h1>
      <div class="form-group">
        <label class="control-label col-sm-3" for="nombre"> nombre</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" id="nombre" name="nombre">
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-sm-3" for="tipo"> Tipo</label>
        <div class="col-sm-5">
          <select class="form-control select2" name="tipo" id="tipo">
            <option value=""></option>
            <option>1dfgdfgdfgdfgdfgdgfdg</option>
            <option>2</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-3" for="cantitad"> Cantidad</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" id="cantitad" name="cantitad">
        </div>
      </div>

      <div class="col-md-5 col-md-offset-3">
        <input type="submit" value="GUARDAR" class="btn btn-primary btn-sm" />
      </div>
    </form>
  </div>
</body>

</html>

这是屏幕截图

单击select2后显示水平scoll

1 个答案: