如何使materializecss按钮在小屏幕上很好地堆叠

Question

我正在做一个用materializecss框架练习的简单项目，我遇到过这个问题。

小屏幕中的按钮不能很好地叠加：

在更大的屏幕上，它们看起来很好看：

我在index.html中有这段代码

    <div class="row">
    <div class="col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">
        <a type="button" class="btn waves-effect waves-light left" >remove selected</a>
        <a class="btn waves-effect waves-light right" >remove all<i class="material-icons right">delete</i></a>
    </div>
</div>

是否可以仅使用框架标签进行修复？我不想为它创建自定义CSS。

Answer 1

请改为尝试：

<div class="col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">

    <a type="button" class="col s5 btn waves-effect waves-light left" style="padding:0;">remove selected</a>

    <a class="col s5 offset-s2 btn waves-effect waves-light right" >remove all<i class="material-icons right">delete</i></a>

</div>

这应该适用于移动分辨率。如果您对桌面分辨率或更高版本有问题，请在此处告诉我或发布整个HTML。

编辑：根据您的要求，以下代码可能会对您有所帮助。显然，你必须根据自己的需要做出很多改变。但我希望这可以指导你。

<div class="row">
    <div class="input-field col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">
        <input placeholder="Placeholder" id="first_name" type="text" class="validate">
        <label for="first_name">First Name</label>
    </div>
</div>
<div class="row hide-on-med-and-up">
    <div class="col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">
        <div class="row">
            <a type="button" class="col s12 btn waves-effect waves-light left" style="padding: 0;">remove selected</a>
        </div>   
        <div class="row">
            <a class="col s12 btn waves-effect waves-light right" >remove all<i class="material-icons right">delete</i></a>
        </div>
    </div>
</div>
<div class="row hide-on-small-only">
    <div class="col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">
        <a type="button" class="col s5 btn waves-effect waves-light left" style="padding: 0;">remove selected</a>
        <a class="col s5 offset-s2 btn waves-effect waves-light right" >remove all<i class="material-icons right">delete</i></a>
    </div>
</div>

通过使用offsets，rows，container，grid等，使用可以实现您想要的大部分内容。

但我必须添加：虽然使用像 materializecss 这样的框架，但是对自己的css的需求是不太可能的，有时您可能只需要它。

希望这会有所帮助。感谢。