如何在MaterializeCSS的card组件内实现满宽显示的button按钮

你的按钮同时使用了col s12栅格类，但Materialize的栅格系统要求col类元素必须嵌套在row类容器内才能正常计算边距和高度。当前按钮的父元素是普通<p>标签，没有row类，导致按钮应用col类的浮动属性后父容器高度塌陷，卡片内容区无法完整包裹按钮，因此仅显示一半。

两种修改方式均可解决问题：

• 方案1（最简修改）：直接移除按钮的col s12类，添加行内样式style="width:100%"即可实现满宽效果，无需改动其他结构
  对应按钮修改代码：

  <p><input class="clcbtn waves-effect waves-light btn" type="button" value="Solve" style="width:100%"></p>
  

• 方案2（符合Materialize栅格规范）：将按钮外层包裹row+col结构，无需修改按钮原有属性
  对应按钮区域修改代码：

  <div class="row">
    <div class="col s12">
      <input class="clcbtn waves-effect waves-light btn" type="button" value="Solve">
    </div>
  </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">
        <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" type="button" value="Solve" style="width:100%"></p>
        </article>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Berglund