响应MaterializeCSS设计

Question

我必须为我们的俱乐部网站创建一个用户页面，但是我使用的是Materialize CSS而不是Bootstrap。我很难做出回应。我的内容显示得很奇怪，文本开箱即用，按钮粘合在一起。

<div class="container">
  <div class="row">
        <div class="col s12">
            <div class="card horizontal hoverable" style="background: rgba(0, 0, 0, 0.3)">
            <div class="card-image">
                <img src="https://static.makeuseof.com/wp-content/uploads/2013/09/IE-automation8.png" style="width: 300px; height: 300px;">
            </div>
            <div class="card-stacked grey-text text-lighten-1">
                <div class="row">
                    <div class="card-content" style="margin-top: -30px;">
                        <h3 class="light-blue-text"><b>Username</b></h4>
                        <p style="margin-top: -10px;">Developer</p>
                        <br>
                        <br>
                        <h5><b>Area of Interest</b></h4>
                        <p>HTML</p>
                    </div>
                </div>
                <div class="footer" style="margin-left: 5px; margin-bottom: 5px;">
                    <span><a href="#" target="_blank"><button class="btn #0d47a1 blue darken-4"><i class="fab fa-linkedin"></i> LinkedIn Profile </button></a></span>


                    <span><a href="#" target="_blank"><button class="btn #e65100 orange darken-4"><i class="fa fa-graduation-cap"></i>Profile </button></a></span>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/

上面的链接，我已经删除了我做出的所有使其响应的尝试。

Answer 1

您的代码中有很多部分与materialize suggested structure相背。

1）通常，在熟悉所使用的组件之前，请坚持使用代码示例：

<div class="row">
 <div class="col s12 m7">
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/100/190/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>
</div>

卡位于行中，位于行中。

2）使用卡片动作作为您的卡片页脚，而不是.footer

没有卡片的.footer类。它称为.card-action：

<div class="card-action">
    <a href="#">This is a link</a>
</div>

3）使用.btn为任何元素赋予button样式：

<a class="btn" href="#" target="_blank"><i class="fa fa-graduation-cap"></i>Profile</a>

您具有span>按钮> a-不需要。把事情简单化。只需添加.btn，就可以使任何元素看起来都像按钮。

4）注意图像上的限制，而且标准卡（图像上方）通常可以更好地工作。为了使您的图像更好地响应，我取消了300倍的高度，而是将其设置为height：100％和object-fit：cover，它将更好地填充空间（IE中不支持object-fit）

5）最后，给您的标签留些许空白，以便它们在移动设备上堆叠时有间距。

更新的密码笔here。

https://materializecss.com/buttons.htmlhttps://materializecss.com/cards.html