文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用Materialize css同步按钮

问使用Materialize css同步按钮
EN

Stack Overflow用户
提问于 2016-10-10 18:08:48
回答 1查看 360关注 0票数 0

我正在使用Materialize CSS (接近于bootstrap)，我有两列带有文本的列，并且在列的底部都有一个按钮。但是，因为两列的内容大小不同，所以按钮的高度不同。(见图)

我可以通过使用保证金来纠正它们，但我不想这样做。

谁有其他的解决方案？

​

​

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

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<!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>

​

materialize
css
twitter-bootstrap
button
positioning
EN

回答 1

Stack Overflow用户

发布于 2016-10-10 19:23:53

首先，你需要让列的高度相等，flexbox可以做到这一点。

然后，您需要将按钮一直按到div的底部。我们可以这样做，同样使用flexbox，但是使用flex-direction:column使每一列都是一个弹性容器，并选择最后一个.row div (按住按钮)并赋予它margin-top:auto。

​

代码语言：javascript
复制
.row {
  display: flex;
}
.col {
  display: flex;
  flex-direction: column;
}
.last {
  margin-top: auto;
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39955911

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档