Bootstrap 3使行的列向右浮动

Question

因此，在深入探讨这个问题之前，我想指出一些简单的要求，即如果可能的话，我希望如何实现这一目标。a) 因为我正在修改使用 Bootstrap 3 的 Woocommerce 模板，所以我不能简单地切换到 Bootstrap 4，即使最新版本确实对我有很大帮助。b) 我可以使用任何技术或自定义代码，只要它可以正常工作，即使它超出了 Bootstrap 3 框架范围。所以这是小提琴： https: //jsfiddle.net/wL1kjc0y/我还想让这个产品列表更有趣，例如，对于奇怪的项目，我想让产品名称、文本、按钮浮动到右侧，以便产品图像出现在左侧，并且几乎对于甚至项目也是如此 - 图像浮动到右侧，文本内容浮动到左侧。我为文本内容创建了 div.col-lg-6 元素，为图像创建了 col-lg-6 元素。问题是，如果我将 .pull-right 类应用于包装 Product 内容的 div.col-lg-6 元素，则 .pull-right 类不起作用。而且因为 Bootstrap 3 不使用 Flexbox，我添加了以下代码：.d-flex {    display: flex !important; }到包裹两列的元素，以便文本垂直居中正常工作。我发现浮动：对；不适用于弹性元素。所以我不确定是否可以做我想做的事情，如果删除 .d-flex 类定义，一切都会正常，然后我可以使用 .pull-right 类，但文本不会垂直居中。您可以看一下删除 .d-flex 并将 .pull-right 类应用于第一项的示例，它按预期工作： https: //jsfiddle.net/7guxfa5o/1/所以最后看起来我有两个不完整的选择：让需要向右浮动但垂直居中不起作用的列，或者在无法浮动列的情况下进行垂直居中。您可以忽略那里的 JavaScript 部分，因为它主要用于检测浏览器窗口大小是否为中等大小，然后应用一些格式、样式规则。任何可行的替代方法或任何我可以尝试的建议都将非常感激。

Answer 1

根据我的理解，您需要在大屏幕上以替代顺序显示您的项目。为什么不在 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)使用 CSS，您可以定义两个类来分别在屏幕上向左和向右移动元素lg。

@media screen and (min-width: 992px) {

 .shift-right{

   right:-50%;

  }

 .shift-left{

  left:-50%;

  }

}

这是使用 CSS 的工作小提琴