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

我正在做一个简单的项目来练习materializecss框架，而且我遇到了这个问题。如何使materializecss按钮在小屏幕上很好地堆叠

当在小屏幕上用不褪色很好的按钮：

The buttons when in a small screen don't stack up nicely

在一个更大的屏幕，他们并排好看的一面：

我有这个代码在我的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。

来源

2017-08-22 Junnel Verceluz

尝试添加'type =“按钮”'并从中移除图标以查看是否有效。 – lscmaro

@iscmaro thnks提醒我添加类型。但仍然不是我正在寻找的修复。我试图让外观保持稳定，但如果这是不可能的，我想ti堆栈不会被破坏，如 –

尝试添加一些边距到锚点标签的底部 –

试试这个：

<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是非常不可能的，有时候你可能只需要它。

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

来源

2017-08-22 18:47:40

哇！谢谢它的工作:)非常感谢你！ –

还有一件事我想补充一点：总会有一个按钮可以容纳的字符数量的限制（特别是在移动视图中）。在这种情况下，您可能需要缩短按钮文本或使按钮占据整个宽度，方法是将col s12放入其中。举个例子，第二个按钮（Remove all）也可能会在第一个（Remove Selected）按钮的下方。覆盖整个宽度...这样，您可以在按钮中放入更多文本。 –

您是指col s12 –

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

回答

相关问题