html - Bootstrap 网格列大小不适用于实现样式化的下拉列表

Question

我正在处理以下示例(由于多选下拉菜单仅使用实体化，因此如果有同样令人愉悦的替代方案，我完全赞成):

            $(document).ready(function() {
              $('.multiselect').material_select();
            });

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
        <style>
          .input-field.col .dropdown-content [type="checkbox"]+label {
            top: -10px;
          }
        </style>
        <div class="container">
          <div class="row">
            <div class='input-field col-3'>
              <select class='multiselect' multiple>
                <option value="" disabled selected>Datacenter</option>
                <option value="rs-iad">rs-iad</option>
                <option value="rs-lhr">rs-lhr</option>
                <option value="rs-ord">rs-ord</option>
                <option value="unknown">unknown</option>
              </select>
            </div>
          </div>
        </div>
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- Latest compiled JavaScript -->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

Demo Here!

我正在尝试让 col-3 正常工作，但它仍然跨越整个页面。我错过了什么吗？

Answer 1

根据你自己的代码，你使用的是bootstrap 3.3:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

bootstrap 3.3.x Grid 中没有col-3 这样的东西| .在 3.3 中，您应该使用 col-xs-3。

您还缺少实际的 Bootstrap CSS 文件。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class='input-field col-xs-3'>

col-3 仅存在于 Bootstrap 4(撰写本文时为测试版)。

            $(document).ready(function() {
              $('.multiselect').material_select();
            });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
        <style>
          .input-field.col .dropdown-content [type="checkbox"]+label {
            top: -10px;
          }
        </style>
        <div class="container">
          <div class="row">
            <div class='input-field col-xs-3'>
              <select class='multiselect' multiple>
                <option value="" disabled selected>Datacenter</option>
                <option value="rs-iad">rs-iad</option>
                <option value="rs-lhr">rs-lhr</option>
                <option value="rs-ord">rs-ord</option>
                <option value="unknown">unknown</option>
              </select>
            </div>
          </div>
        </div>
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- Latest compiled JavaScript -->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>