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

【问题标题】：how to make materializecss buttons stack nicely on small screens如何使materializecss按钮在小屏幕上很好地堆叠
【发布时间】：2018-01-31 00:53:19
【问题描述】：

我正在做一个简单的项目来练习 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。

【问题讨论】：

尝试添加type="button" 并从其中删除图标，看看是否有效。
@iscmaro 感谢提醒我添加类型。但仍然不是我正在寻找的修复程序。我正在努力使外观保持一致，但如果这不可能，我希望 ti 堆叠不要像那样被破坏
尝试在锚标签底部添加一些边距
尝试在每个按钮周围而不是在两个按钮周围创建一个网格。

标签： css materialize

【解决方案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 的需求是非常不可能的，有时您可能只需要它。

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

【讨论】：

我还想补充一件事：按钮可以容纳的字符数总是有限制的（尤其是在移动视图中）。在这种情况下，您可能需要缩短按钮文本或通过将 col s12 放入按钮使按钮占据整个宽度。举个例子，第二个按钮（全部删除）也可能位于第一个（删除所选）按钮的下方。覆盖整个宽度...这样您可以在按钮中容纳更多文本。
你的意思是 col s12
是的。上校 s12。为错字道歉。我现在正在使用我的手机。无论如何，您可能希望通过将 col s12 作为属性来将按钮保留在两行中。这样你就可以容纳更多的文字。我希望你能明白。回到家后，我也会尝试将其放入代码中。
但是我在代码中的做法也很好。这只是对未来的提示。在某些情况下，如果按钮中的文本很大，并且由于手机屏幕的宽度很小，如果您将两个按钮放在同一行中，您的某些文本会被剥离（截断）。
我想在任务中添加：当我让我的按钮在小屏幕上占据整个网格时，我将如何在它们之间添加一个空格，这样它仍然看起来不错。只使用框架标签和类？