实现网格在 2 列之间放置不需要的空间

Question

我对 CSS 框架有点生疏，我试图做一些简单的事情：2 列不同大小的移动设备和平板电脑，但是，2 列之间有一个烦人的空间，我不明白是什么正在发生。

My JSFiddle

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

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

Answer 1

如果您说的是我在附图中用红色括号标记的间隙——它不是两列之间的间隙。我用蓝色背景颜色标记了您的第一列。

您的侧导航有一个固定的 300 像素宽度，它只是没有填满第一列。

ma​​terialize.min.css

.sidenav {
    position: fixed;
    width: 300px;
    left: 0;
    top: 0;
    margin: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    height: 100%;
    height: calc(100% + 60px);
    height: -moz-calc(100%);
    padding-bottom: 60px;
    background-color: #cf303000;
    z-index: 999;
    overflow-y: auto;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);

}