Question

因此，以下代码包含在我的网上商店中。

我认为它的目的是将物品拉到左边，如下所示，并根据物品的数量而变化。

我目前有一个项目，并希望它居中。

在不破坏任何响应代码并理解此方法的情况下，最好的方法是什么？

/*============================================================================
  PULL
    - Pull classes, to move grid items back to the left by certain amounts
==============================================================================*/
@mixin pull-setup($namespace: "") {
  /* Whole */
  #{$class-type}pull--#{$namespace}one-whole       { right:100%; @include silent-relative(); }

  /* Halves */
  #{$class-type}pull--#{$namespace}one-half        { right:50%; @include silent-relative(); }

  /* Thirds */
  #{$class-type}pull--#{$namespace}one-third       { right:33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-thirds      { right:66.666%; @include silent-relative(); }

  /* Quarters */
  #{$class-type}pull--#{$namespace}one-quarter     { right:25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-quarters    { @extend #{$class-type}pull--#{$namespace}one-half; }
  #{$class-type}pull--#{$namespace}three-quarters  { right:75%; @include silent-relative(); }

  /* Fifths */
  #{$class-type}pull--#{$namespace}one-fifth       { right:20%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-fifths      { right:40%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-fifths    { right:60%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-fifths     { right:80%; @include silent-relative(); }

  /* Sixths */
  #{$class-type}pull--#{$namespace}one-sixth       { right:16.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-sixths      { @extend #{$class-type}pull--#{$namespace}one-third; }
  #{$class-type}pull--#{$namespace}three-sixths    { @extend #{$class-type}pull--#{$namespace}one-half; }
  #{$class-type}pull--#{$namespace}four-sixths     { @extend #{$class-type}pull--#{$namespace}two-thirds; }
  #{$class-type}pull--#{$namespace}five-sixths     { right:83.333%; @include silent-relative(); }

  /* Eighths */
  #{$class-type}pull--#{$namespace}one-eighth      { right:12.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-eighths     { @extend #{$class-type}pull--#{$namespace}one-quarter; }
  #{$class-type}pull--#{$namespace}three-eighths   { right:37.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-eighths    { @extend #{$class-type}pull--#{$namespace}one-half; }
  #{$class-type}pull--#{$namespace}five-eighths    { right:62.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-eighths     { @extend #{$class-type}pull--#{$namespace}three-quarters; }
  #{$class-type}pull--#{$namespace}seven-eighths   { right:87.5%; @include silent-relative(); }

  /* Tenths */
  #{$class-type}pull--#{$namespace}one-tenth       { right:10%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-tenths      { @extend #{$class-type}pull--#{$namespace}one-fifth; }
  #{$class-type}pull--#{$namespace}three-tenths    { right:30%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-tenths     { @extend #{$class-type}pull--#{$namespace}two-fifths; }
  #{$class-type}pull--#{$namespace}five-tenths     { @extend #{$class-type}pull--#{$namespace}one-half; }
  #{$class-type}pull--#{$namespace}six-tenths      { @extend #{$class-type}pull--#{$namespace}three-fifths; }
  #{$class-type}pull--#{$namespace}seven-tenths    { right:70%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eight-tenths    { @extend #{$class-type}pull--#{$namespace}four-fifths; }
  #{$class-type}pull--#{$namespace}nine-tenths     { right:90%; @include silent-relative(); }

  /* Twelfths */
  #{$class-type}pull--#{$namespace}one-twelfth     { right:8.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-twelfths    { @extend #{$class-type}pull--#{$namespace}one-sixth; }
  #{$class-type}pull--#{$namespace}three-twelfths  { @extend #{$class-type}pull--#{$namespace}one-quarter; }
  #{$class-type}pull--#{$namespace}four-twelfths   { @extend #{$class-type}pull--#{$namespace}one-third; }
  #{$class-type}pull--#{$namespace}five-twelfths   { right:41.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-twelfths    { @extend #{$class-type}pull--#{$namespace}one-half; }
  #{$class-type}pull--#{$namespace}seven-twelfths  { right:58.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eight-twelfths  { @extend #{$class-type}pull--#{$namespace}two-thirds; }
  #{$class-type}pull--#{$namespace}nine-twelfths   { @extend #{$class-type}pull--#{$namespace}three-quarters; }
  #{$class-type}pull--#{$namespace}ten-twelfths    { @extend #{$class-type}pull--#{$namespace}five-sixths; }
  #{$class-type}pull--#{$namespace}eleven-twelfths { right:91.666%; @include silent-relative(); }
}

任何帮助将不胜感激，我尝试过中心标签并改变百分比虽然它不起作用并且也改变了尺寸。

谢谢。

添加了HTML：

<div class="grid-uniform product-grid">

<div class="grid-item medium--one-third large--one-third">

  <a href="/products/50g-alba-cinnamon" class="product-grid-item text-center">
    <div class="product-grid-image" style="height: 181px;">
      <div class="product-grid-image--centered">


        <img src="//cdn.shopify.com/s/files/1/0834/6311/products/image002_large.jpg?v=1429679422" alt="50g of pure Alba Cinnamon">
      </div>
    </div>


      <p>

          <span class="h6 color-secondary">50g of pure Alba Cinnamon</span><br>

$16    
      </p>
  </a>
</div>
</div>

Answer 1

已经说过，但那不是CSS。除非你知道自己在做什么，否则不应该触摸该文件。

无论如何，对于一个工作示例，您还应该提供您的HTML。

如果您只需要移动1个元素，则可以直接在html中添加内联样式以保持简单。

read

了解拉动类 - 居中项目

1 个答案: