使用 Materialise css 同步按钮答案

【问题标题】：Sync buttons with Materialize css使用 Materialise css 同步按钮
【发布时间】：2016-10-10 10:08:48
【问题描述】：

我正在使用 Materialize CSS（接近于引导程序），并且我有两列带有文本，并且在列的底部都有一个按钮。但是，由于两列的内容大小不同，因此按钮的高度不同。（见图）

我可以使用边距直接设置它们，但我不想这样做。

有人有其他解决方案吗？

它似乎不适用于我，这是完整的代码。也许你能找到我做错了什么。

body {
    background-image: url("../images/bg.jpg");
    background-repeat: repeat;
}

nav {
    padding-left: 1em;
    -webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
}

/* label focus color */
.input-field input[type=password]:focus + label {
    color: #ee6e73;
}
/* label underline focus color */
.input-field input[type=password]:focus {
    border-bottom: 1px solid #ee6e73;
    box-shadow: 0 1px 0 0 #ee6e73;
}

/* label focus color */
.input-field input[type=email]:focus + label {
    color: #ee6e73;
}
/* label underline focus color */
.input-field input[type=email]:focus {
    border-bottom: 1px solid #ee6e73;
    box-shadow: 0 1px 0 0 #ee6e73;
}

.input-field button {
    background-color: #666666;
}

.input-field button:hover {
    background-color: #ee6e73;
}

.container {
    width:100%;
}

.container .section {
    background-color:#e2e2e2;
    -webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    margin-top:1em;
    width:100%;
    padding:1em;
}

footer {
    background-color: #222222;
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
    padding-top: 1em;
    -webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
}

footer h5 {
    color: white;
    text-shadow: 2px 2px #000000;
}

footer a {
    color: gray;
}

footer a:hover {
    color: #ee6e73;
}

.input-field {
    margin-top: -1em;
}

.item {
    height: 50px;
    margin: 0 9px;
    border-right: 1px solid #ffffff;
    border-right-color: #222222;
}

.item:last {
    border-right: none
}

.container .section h4 {
    padding-left: 1em;
    margin-bottom: 1em;


.container .section p {
    margin-top: 1em;
}

.row {
    display: flex;
}
.col {
    display: flex;
    flex-direction: column;
}
.last {
    margin-top: auto;
}

<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
    <style type="text/css" media="screen">@import "../includes/style.css";</style>
    <title>Home</title>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>

<nav>
    <div class="nav-wrapper">
        <a href="../" class="brand-logo">Home</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
        </ul>
    </div>
</nav>


<div class="container">
  <div class="section">
    <div class="row">
      <div class=" col s6">
        <h4>Welkom!</h4>
        <p>Heeft u nog geen account? Dan kunt u hieronder uzelf registreren door op de knop "Aanmelden" te klikken. Deze knop stuurt u door naar een pagina waar u uw gegevens kan invullen. Deze gegevens worden nagekeken door een administrator waarna u een
          activatiecode krijgt toegestuurd in uw mail. Deze code geeft u toegang tot de rest van het systeem!</p>
        <div class="row last">
          <div class="input-field s12">
            <button class="btn waves-effect waves-light" type="submit" name="action">Aanmelden
              <i class="material-icons right">send</i>
            </button>
          </div>
        </div>
      </div>
      <div class="col s6">
        <h4>Heb je al een account?</h4>
        <div class="row">
          <div class="input-field col s12">
            <input id="email" type="email" class="validate">
            <label for="email" data-error="Foutief e-mailadres!">E-mail</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
          </div>
        </div>
        <div class="row last">
          <div class="input-field s12">
            <button class="btn waves-effect waves-light" type="submit" name="action">Inloggen
              <i class="material-icons right">send</i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Import jQuery before materialize.js-->
<script type="text/javascript" src="dropdown.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</body>
</html>

【问题讨论】：

最好的解决方案是，添加一个类，并使父 div 相对，按钮位置：绝对底部 0 或其他东西，父级最小高度，更容易处理。跨度>
首先，您需要使列相等。你的结构看起来很奇怪。我不希望在.col div 中看到.rows。

标签： css twitter-bootstrap button positioning materialize

【解决方案1】：

首先，你需要让列等高，flexbox可以做到。

然后您需要将按钮一直推到 div 的底部。我们可以这样做，再次使用 flexbox，但使用 flex-direction:column 使每一列成为 flex-container 并选择最后一个 .row div（它包含按钮）并给它 margin-top:auto。

.row {
  display: flex;
}
.col {
  display: flex;
  flex-direction: column;
}
.last {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<div class="container">
  <div class="section">
    <div class="row">
      <div class=" col s6">
        <h4>Welkom!</h4>
        <p>Heeft u nog geen account? Dan kunt u hieronder uzelf registreren door op de knop "Aanmelden" te klikken. Deze knop stuurt u door naar een pagina waar u uw gegevens kan invullen. Deze gegevens worden nagekeken door een administrator waarna u een
          activatiecode krijgt toegestuurd in uw mail. Deze code geeft u toegang tot de rest van het systeem!</p>
        <div class="row last">
          <div class="input-field s12">
            <button class="btn waves-effect waves-light" type="submit" name="action">Aanmelden
              <i class="material-icons right">send</i>
            </button>
          </div>
        </div>
      </div>
      <div class=" col s6">
        <h4>Heb je al een account?</h4>
        <div class="row">
          <div class="input-field col s12">
            <input id="email" type="email" class="validate">
            <label for="email" data-error="Foutief e-mailadres!">E-mail</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
          </div>
        </div>
        <div class="row last">
          <div class="input-field s12">
            <button class="btn waves-effect waves-light" type="submit" name="action">Inloggen
              <i class="material-icons right">send</i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

Codepen.io Demo

【讨论】：

它似乎对我不起作用。我已经用新代码编辑了现有的帖子。也许您发现它有问题。