Question

我对CSS框架有些不满意，我试图做一些简单的事情： 2列用于移动设备和平板电脑的大小不同的列，但是，有一个烦人的空间我不明白发生了什么（链接到屏幕截图）

我的代码（您可以复制和粘贴，将在您的计算机上运行）：

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<meta charset="utf-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="row">
        <div class="col s12 m3">
          <ul class="sidenav sidenav-fixed">
            <li class="bold"><a class="head-title green-text text-darken-1"><i class="material-icons">music_note</i>{{title}}</a></li>
            <li class="bold"><a ><i class="material-icons">search</i>Buscar</a></li>
            <li class="bold"><a ><i class="material-icons">stars</i>Artistas</a></li>
            <li class="bold"><a ><i class="material-icons">book</i>Albums</a></li>
            <div class="divider"></div>
            <li class="bold"><a><i class="material-icons">build</i>Mis datos</a></li>
            <li class="bold"><a href="#"><i class="material-icons">close</i>Cerrar sesion</a></li>
          </ul>
        </div>

        <div class="col s12 m9">
            <form> 
                <div>
                  <label>Nombre</label>
                  <input type="text"  name="name" required>
                </div>
                <div>
                  <label>Apellidos</label>
                  <input type="text" name="surname" required>
                </div>
                <div>
                  <label>Correo electronico</label>
                  <input type="email" name="email" required>
                </div>

                <div class="row">
                  <div class="col s6">
                    <div class="file-field input-field">
                      <div class="btn">
                        <span>Foto</span>
                        <input type="file">
                      </div>
                      <div class="file-path-wrapper">
                        <input class="file-path validate" type="text">
                      </div>
                    </div>
                  </div>

                  <div class="col s6 center-align">
                      <div class="">
                          <img class="responsive-img">
                      </div>
                  </div>
                </div>

                <input type="submit" value="Actualizar mis datos" class="btn btn-primary">
            </form>
        </div>    
    </div>
</body>

problem

https://jsfiddle.net/0bantqfd/

物化网格不能正常工作

0 个答案: