时间戳

首页 > 解决方案 > Bootstrap 3 使行的列向右浮动

javascript - Bootstrap 3 使行的列向右浮动

问题描述

所以在我深入探讨这个问题之前，如果可能的话，我想指出我希望如何完成这个问题的简单要求。

a) 因为我正在修改使用 Bootstrap 3 的 Woocommerce 模板，所以我不能简单地切换到 Bootstrap 4，即使最新版本确实对我有很大帮助。

b) 我可以使用任何技术或自定义代码，只要它工作正常，即使它超出了 Bootstrap 3 框架范围。

所以这里的小提琴：https ://jsfiddle.net/wL1kjc0y/

我还想让这个产品列表更有趣，例如，对于奇怪的项目，我想让产品名称、文本、按钮浮动到右侧，这样产品图像就会出现在左侧，而且几乎偶数项也一样——图像向右浮动，文本内容向左浮动。

我为文本内容创建了 div.col-lg-6 元素，为图像创建了 col-lg-6。问题是，如果我将 .pull-right 类应用于包装产品内容的 div.col-lg-6 元素，它就不起作用。而且因为 Bootstrap 3 不使用 flexbox 我添加了这个代码：

.d-flex {
    display: flex !important;
}

到包裹两列的元素，以便垂直居中对文本正常工作。我发现了那个浮动：对；不适用于 flex 元素。所以我不确定是否可以做我想做的事，如果我删除 .d-flex 类定义一切正常，那么我可以使用 .pull-right 类，但文本不会垂直居中。

您可以查看删除 .d-flex 并将 .pull-right 类应用于第一项的示例，它按预期工作：https ://jsfiddle.net/7guxfa5o/1/

所以最后看起来我有两个不完整的选择：让需要向右浮动但垂直居中不起作用的列，或者在无法浮动列的情况下进行垂直居中。

您可以忽略那里的 JavaScript 部分，因为它主要用于检测浏览器窗口大小是否为中等大小，然后应用一些格式、样式规则。

任何可行的替代方法都将不胜感激，或者对我可以尝试的其他方法提出任何建议。

标签： javascripthtmlcsstwitter-bootstrap-3

解决方案

据我了解，您需要在大屏幕上以替代顺序显示您的项目。为什么不在 HTML 代码本身中订购它们？请检查 小提琴，如果您正在寻找相同的东西，请告诉我。

<div class="container-fluid">
  <div class="row" style="background-color: #DDC1C1">
    <div class="col-lg-12 product_cat_col">
      <div class="col-lg-6 pull-right" style="margin: auto;">
        <p><label class="label label-danger">IŠPARDUOTA</label></p>
        <h3 class="title40 lora-font font-bold black">
          Asun inhaliatorius „Energy + B12“ </h3>
        <img class="product_cat_img hidden" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-energy-b12.png">
        <div class="title18 black product_cat_text">
          <div class="woocommerce-product-details__short-description">

            <strong>Asun inhaliatorius „Energy + B12“
                        </strong>Išskirtinis Asun inhaliatorius, turintis net dvi veikliąsias medžiagas, maksimaliam poveikiui. Gaivaus arbūzų skonio „Energy + B12“ inhaliatorius išsklaidys blogą nuotaiką ir papildys energijos rezervus. Vitamino
            B12 trūkumas gali pasireikšti daugybe skirtingų neigiamų simptomų, iš kurių daugelis yra tokie, kaip lėtinis nuovargis, nuotaikos sutrikimai, ar net depresija. Taurinas vaidina svarbų vaidmenį vitamino B12 sintezėje. Inhaliavimas užtikrina
            maksimaliai greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių dėka patenka tiesiai į kraują.

          </div>
          <div class="woosb-wrap woosb-bundled">
            <div class="woosb-before-text woosb-text"></div>
          </div>
          &nbsp;
        </div>
        <a class="shop-button bg-white" href="https://asun.lt/inhaliatoriai/asun-inhaliatorius-energy-b12/">Sužinoti daugiau</a>
      </div>
      <div class="col-lg-6 col-md-12" style="margin: auto;">
        <img class="product_cat_img_second" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-energy-b12.png">
      </div>
    </div>
  </div>
  <div class="row" style="background-color: #d6d7d8">
    <div class="col-lg-12 product_cat_col d-flex">
      <div class="col-lg-6" style="margin: auto;">
        <p><label class="label label-danger">IŠPARDUOTA</label></p>
        <h3 class="title40 lora-font font-bold black">
          Asun inhaliatorius „Sleep“ </h3>
        <img class="product_cat_img hidden" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-sleep.png">
        <div class="title18 black product_cat_text">
          <div class="woocommerce-product-details__short-description">

            <strong>Asun inhaliatorius „Sleep“
                        </strong>Dažnai sunku užmigti dėl kankinančios nemigos? Su Asun "Sleep" užmikite greičiau ir pagerinkite miego kokybę . Sudėtyje esantis melatoninas,&nbsp;dažnai dar vadinamas „miego hormonu“, nes melatonino didelis
            kiekis gali padėti jums užmigti.&nbsp;Melatoninas yra hormonas, kuris reguliuoja bei gilina miegą. Dėka Asun technologijų,&nbsp;inhaliuojant medžiagų įsisavinimas tampa efektyvesnis, išvengiant susidurimo su virškinamuoju traktu. Į organizmą
            patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių dėka patenka tiesiai į kraują.

          </div>
          <div class="woosb-wrap woosb-bundled">
            <div class="woosb-before-text woosb-text"></div>
          </div>
          &nbsp;
        </div>
        <a class="shop-button bg-white" href="https://asun.lt/inhaliatoriai/asun-inhaliatorius-sleep/">Sužinoti
                    daugiau</a>
      </div>
      <div class="col-lg-6 col-md-12" style="margin: auto;">
        <img class="product_cat_img_second" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-sleep.png">
      </div>
    </div>
  </div>
  <div class="row" style="background-color: #DDC1C1">
    <div class="col-lg-12 product_cat_col d-flex">

      <div class="col-lg-6 col-md-12" style="margin: auto;">
        <img class="product_cat_img_second" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-diet.png">
      </div>
      <div class="col-lg-6" style="margin: auto;">
        <p><label class="label label-danger">IŠPARDUOTA</label></p>
        <h3 class="title40 lora-font font-bold black">
          Asun inhaliatorius „Diet“ </h3>
        <img class="product_cat_img hidden" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-diet.png">
        <div class="title18 black product_cat_text">
          <div class="woocommerce-product-details__short-description">

            <strong>Asun inhaliatorius „Diet“
                        </strong>Gaivaus greipfrutų skonio, praturtintas triptofanu, kuris organizme vėliau virsta į seratoniną. O kaip žinia, seratoninas&nbsp;aktyviai dalyvauja reguliuojant apetitą. Pats inhaliavimas užtikrina maksimaliai
            greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių dėka patenka tiesiai į kraują.

          </div>
          <div class="woosb-wrap woosb-bundled">
            <div class="woosb-before-text woosb-text"></div>
          </div>
          &nbsp;
        </div>
        <a class="shop-button bg-white" href="https://asun.lt/inhaliatoriai/asun-inhaliatorius-diet/">Sužinoti
                    daugiau</a>
      </div>
    </div>
  </div>
  <div class="row" style="background-color: #d6d7d8">
    <div class="col-lg-12 product_cat_col d-flex">
      <div class="col-lg-6" style="margin: auto;">
        <p><label class="label label-danger">IŠPARDUOTA</label></p>
        <h3 class="title40 lora-font font-bold black">
          Asun inhaliatorius „ Vitaminas B12“ (braškė) </h3>
        <img class="product_cat_img hidden" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-vitaminas-b12-braske.png">
        <div class="title18 black product_cat_text">
          <div class="woocommerce-product-details__short-description">

            <strong>Asun inhaliatorius „ Vitaminas B12“
                        </strong>Vitamino B12 trūkumas gali pasireikšti daugybe skirtingų neigiamų simptomų, iš kurių daugelis yra tokie, kaip lėtinis nuovargis, nuotaikos sutrikimai, ar net depresija. Gaukite reikiamas vitamino B12 dozes
            Asun inhaliatoriaus pagalba.&nbsp;Inhaliavimas užtikrina maksimaliai greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių
            dėka patenka tiesiai į kraują.

          </div>
          <div class="woosb-wrap woosb-bundled">
            <div class="woosb-before-text woosb-text"></div>
          </div>
          &nbsp;
        </div>
        <a class="shop-button bg-white" href="https://asun.lt/inhaliatoriai/asun-inhaliatorius-vitaminas-b12-braske/">Sužinoti daugiau</a>
      </div>
      <div class="col-lg-6 col-md-12" style="margin: auto;">
        <img class="product_cat_img_second" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-vitaminas-b12-braske.png">
      </div>
    </div>
  </div>
  <div class="row" style="background-color: #DDC1C1">
    <div class="col-lg-12 product_cat_col d-flex">

      <div class="col-lg-6 col-md-12" style="margin: auto;">
        <img class="product_cat_img_second" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-focus.png">
      </div>
      <div class="col-lg-6" style="margin: auto;">
        <h3 class="title40 lora-font font-bold black">
          Asun inhaliatorius „Focus“ </h3>
        <img class="product_cat_img hidden" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-focus.png">
        <div class="title18 black product_cat_text">
          <div class="woocommerce-product-details__short-description">

            <strong>Asun inhaliatorius „Focus“
                        </strong>Įveikite stresą ir nerimą, pagerinkite savo koncentraciją su Asun FOCUS. Sudėtyje esančios Romos ramunėlės dar Romos imperijos laikais būdavo duodamos kariams siekiant skatinti jų koncentraciją ir drąsą. Romos
            ramunėlės padeda kovojant su nerimu ir depresija, o taip pat mažina alergijas, gerina miego kokybę, teigiamai veikia odą, virškinimo traktą, širdies darbą, pasižymi priešvėžinėmis savybėmis.

          </div>
          <div class="woosb-wrap woosb-bundled">
            <div class="woosb-before-text woosb-text"></div>
          </div>
          &nbsp;
        </div>
        <a class="shop-button bg-white" href="https://asun.lt/inhaliatoriai/asun-inhaliatorius-focus/">Sužinoti
                    daugiau</a>
      </div>
    </div>
  </div>
  <div class="row" style="background-color: #d6d7d8">
    <div class="col-lg-12 product_cat_col d-flex">
      <div class="col-lg-6" style="margin: auto;">
        <p><label class="label label-danger">IŠPARDUOTA</label></p>
        <h3 class="title40 lora-font font-bold black">
          Asun inhaliatorius „Relax“ </h3>
        <img class="product_cat_img hidden" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-relax.png">
        <div class="title18 black product_cat_text">
          <div class="woocommerce-product-details__short-description">

            <strong>Asun inhaliatorius „Relax“
                        </strong>Siekiant greito nusiraminimo streso metu, jums gali puikiai pasitarnauti Asun “Relax” inhaliatorius. Levandų skonio “Relax” sudėtis, praturtinta triptofanu, maisto medžiaga, padedančia nusiraminti ir pagerinti
            miego kokybę. Inhaliavimas užtikrina maksimaliai greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių dėka patenka tiesiai
            į kraują.

          </div>
          <div class="woosb-wrap woosb-bundled">
            <div class="woosb-before-text woosb-text"></div>
          </div>
          &nbsp;
        </div>
        <a class="shop-button bg-white" href="https://asun.lt/inhaliatoriai/asun-inhaliatorius-relax/">Sužinoti
                    daugiau</a>
      </div>
      <div class="col-lg-6 col-md-12" style="margin: auto;">
        <img class="product_cat_img_second" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-relax.png">
      </div>
    </div>
  </div>
  <div class="row" style="background-color: #DDC1C1">
    <div class="col-lg-12 product_cat_col d-flex">

      <div class="col-lg-6 col-md-12" style="margin: auto;">
        <img class="product_cat_img_second" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-vitaminas-b12.png">
      </div>
      <div class="col-lg-6" style="margin: auto;">
        <p><label class="label label-danger">IŠPARDUOTA</label></p>
        <h3 class="title40 lora-font font-bold black">
          Asun inhaliatorius „ Vitaminas B12“ </h3>
        <img class="product_cat_img hidden" src="https://asun.lt/wp-content/uploads/asun-inhaliatorius-vitaminas-b12.png">
        <div class="title18 black product_cat_text">
          <div class="woocommerce-product-details__short-description">

            <strong>Asun inhaliatorius „ Vitaminas B12“
                        </strong>Vitamino B12 trūkumas gali pasireikšti daugybe skirtingų neigiamų simptomų, iš kurių daugelis yra tokie, kaip lėtinis nuovargis, nuotaikos sutrikimai, ar net depresija. Gaukite reikiamas vitamino B12 dozes
            Asun inhaliatoriaus pagalba.&nbsp;Inhaliavimas užtikrina maksimaliai greitą bei kokybišką medžiagų įsisavinimą išvengiant susidurimo su virškinamuoju traktu. Į organizmą patenkančios veikliosios medžiagos neapkrauna vidaus organų ir plaučių
            dėka patenka tiesiai į kraują.

          </div>
          <div class="woosb-wrap woosb-bundled">
            <div class="woosb-before-text woosb-text"></div>
          </div>
          &nbsp;
        </div>
        <a class="shop-button bg-white" href="https://asun.lt/inhaliatoriai/asun-inhaliatorius-vitaminas-b12/">Sužinoti daugiau</a>
      </div>
    </div>
  </div>
</div>

解决方案2）lg使用CSS，您可以定义两个类来分别为屏幕左右移动元素。

@media screen and (min-width: 992px) {
 .shift-right{
   right:-50%;
  }
 .shift-left{
  left:-50%;
  }
}

这是使用 CSS的工作小提琴

推荐阅读