Question

我试图在materializecss中创建一些新东西，然后我创建了一个带有类行的div，其中我放了2张牌。其中一张卡在div中，类为col s4，另一张在div中，类为col s8。这些卡分为两行。无法弄清楚为什么。为什么他们不在同一行？

这里是代码示例，第一个div用类行不行，第二个工作正常，有什么区别？

<div class="row"><!-- start top vijesti -->
  <div class="col s1">1</div>
  <div class="col s7">ff</div>
  <div class="col s4">ff</div>
</div><!-- end top vijesti -->
<div class="row">
  <div class="col s1">1</div>
  <div class="col s1">2</div>
  <div class="col s1">3</div>
  <div class="col s1">4</div>
  <div class="col s1">5</div>
  <div class="col s1">6</div>
  <div class="col s1">7</div>
  <div class="col s1">8</div>
  <div class="col s1">9</div>
  <div class="col s1">10</div>
  <div class="col s1">11</div>
  <div class="col s1">12</div>
</div>

Answer 1

我尝试复制你的问题，但没有看到任何问题。也许您可能想看看this（如果这是您要实现的目标），看看您是否做得对，或者可能是为了我们实际确定错误的方法，或者发布代码

HTML：

<div class="row"><!-- start top vijesti -->
    <div class="col s1">1</div>
    <div class="col s7">ff</div>
    <div class="col s4">ff</div>
</div><!-- end top vijesti -->
<div class="row">
    <div class="col s1">1</div>
    <div class="col s1">2</div>
    <div class="col s1">3</div>
    <div class="col s1">4</div>
    <div class="col s1">5</div>
    <div class="col s1">6</div>
    <div class="col s1">7</div>
    <div class="col s1">8</div>
    <div class="col s1">9</div>
    <div class="col s1">10</div>
    <div class="col s1">11</div>
    <div class="col s1">12</div>
</div>
<div class="row">
    <div class="col s4">
        <div class="card blue-grey darken-1">
            <div class="card-content white-text">
                <span class="card-title">Card Title</span>
                <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
            </div>
        </div>
    </div>
    <div class="col s8">
        <div class="card blue-grey darken-1">
            <div class="card-content white-text">
                <span class="card-title">Card Title</span>
                <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
            </div>
        </div>
    </div>
</div>

CSS：

.col {
    border: 1px solid;
}

.row {
    border: 1px dotted;
}

卡分为2行？

1 个答案: