代码之家 › 专栏 › 技术社区 › skr

在html页面中使用materialize css时不呈现复选框

materialize django-forms html django

skr · 技术社区 · 7 年前

使用materialize css时,复选框不在html页面中呈现。我正在尝试对Django表单使用物化css。我尝试了Django的形式,但没有成功。因此,我尝试了一个单独的示例html页面。“静止”复选框不渲染。我附上了呈现的html页面的截图。“已婚”复选框不带复选框。我尝试在页面上使用inspector工具,似乎有一个复选框,但不可见。

下面是我尝试用来测试功能的html代码示例。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  <script>
  $( function() {
      $('.collapsible').collapsible();
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

<div class="container">
  <h2>Collapsible Panel</h2>
  <p>Click on the collapsible panel to open and close it.</p>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Panel Body</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  </div>

  <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span> ></span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

         <div class ="input-field col s12">
            <p>
            <input id = "married" type = "checkbox" />
            <label for = "married">Married</label>
            </p>
        </div>


</div>
</body>
</html>

1 回复 | 直到 7 年前

Zahurafzal Mirza 6 年前

您正在示例HTML页面中使用materialise CSS和bootstrap CSS。据我所知,在materialise上工作过,bootstrap和materialise的CSS都会发生冲突,导致无法呈现某些控件。

我知道有些网站使用引导并实现了这两种功能,但它们是专门为这样的网站设计的,不会产生冲突。

如果您想同时使用它们,我建议您下载一个引导实现的模板。我也这么做了,这对我很有效。