为什么在框架的第一列之前有一个 space？

Question

我正在使用骨架。我使用 one-third 列三次。但是第三个不在同一条线上，正在脱离行。它在下一行。第一列前还有一个白色的space。

我正在使用以下 HTML 代码！

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="one-third column feature">
  <h2>Feature</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Perfomance</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Trial</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>

Answer 1

.column的默认margin-left是4%，每列的width是30.6667%，所以加起来是(30.6667% + 4%) * 3 = 104.0001%.那就是将最后一列推到下一行。

您需要将 margin-left 覆盖为 2.6%，这样加起来就是 (30.6667% + 2.6%) * 3 = 99.8001%

.column {
  margin-left: 2.6% !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="one-third column feature">
  <h2>Feature</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Perfomance</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Trial</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>

Answer 2

只需将您的代码放在 <div class="row"> 和 </div>

之间

Answer 3

我遇到了同样的问题。解决方案是将这 3 "one-third column" 与...列包装在此处 ..

@chipChocolate 我们使用 CSS 框架来避免这种详细的计算。添加行是框架提供的方式。

希望对您有所帮助

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="row"><!-- row for one-third -->
<div class="one-third column feature">
  <h2>Feature</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Perfomance</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Trial</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
</div><!-- End of row -->

为什么在框架的第一列之前有一个 space？

Why is there a space before first column in skeleton?

html

css

skeleton-css-boilerplate