如何在materializecss中制作卡片内的全宽按钮？答案

【问题标题】：how to make a full width button inside card in materializecss?如何在materializecss中制作卡片内的全宽按钮？
【发布时间】：2021-06-19 08:25:27
【问题描述】：

我正在尝试在我的物化 css 卡中获得一个全宽按钮，到目前为止我已经实现了以下结果。

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

<div class="row">
  <div class="col s12">
    <div class="card teal lighten-4">
      <div class="card-content">


        <article id="post-946650" class="post-946650 page type-page status-publish hentry">
          <p><input id="id_func_calc" type="hidden" value="[[{&quot;assign&quot;:[&quot;#_z&quot;],&quot;eval&quot;:&quot;#y/#x&quot;}]]">
          </p>
          <div class="mathquill-embedded-latex mathquill-rendered-math"><span class="text">Travel time(in minutes)</span>
            <input id="x" class="oInp" size="3" type="text" autocomplete="off"><br>
            <span class="text">Miles to destination</span> <input id="y" class="oInp" size="3" type="text"><br>
            <span class="text">Avg speed</span> <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;">
          </div>
          <p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
        </article>


      </div>

    </div>
  </div>
</div>

但问题是按钮不在卡片内，只有一半。任何帮助表示赞赏。

【问题讨论】：

标签： materialize

【解决方案1】：

将行添加到类名 card-content 的第 4 个 div

<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>
    
    <div class="row">
      <div class="col s12">
        <div class="card teal lighten-4">
          <div class="card-content row">
            <article id="post-946650" class="post-946650 page type-page status-publish hentry">
              <p><input id="id_func_calc" type="hidden" value="[[{&quot;assign&quot;:[&quot;#_z&quot;],&quot;eval&quot;:&quot;#y/#x&quot;}]]"></p>
              <div class="mathquill-embedded-latex mathquill-rendered-math">
                  <span class="text">Travel time(in minutes)</span>
                  <input id="x" class="oInp" size="3" type="text" autocomplete="off"/><br>
                
                  <span class="text">Miles to destination</span> 
                  <input id="y" class="oInp" size="3" type="text"><br>
                
                  <span class="text">Avg speed</span> 
                  <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;"><br>
                
                  <p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
                
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>

【讨论】：