Question

我有以下示例我正在完成（仅使用实体化因为多选下拉，所以如果有一个同样视觉上令人愉悦的替代方案，我就是这样）：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

Demo Here!

1 个答案: