Bootstrap 3 使行的列向右浮动

Question

因此，在我深入研究这个问题之前，如果可能的话，我想指出我希望如何完成这个问题的简单要求。

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

b) 我可以使用任何技术或自定义代码，只要它工作正常，即使它不在 Bootstrap 3 框架范围内也是如此。

所以这是 fiddle：https://jsfiddle.net/wL1kjc0y/

我也想让这个产品列表更有趣，例如，对于奇怪的项目，我想让产品名称、文字、按钮浮动到右侧，这样产品图片就会出现在左，甚至项目几乎相同 - 图片向右浮动，文本内容向左浮动。

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

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

到包含两列的元素，以便垂直居中适用于文本。我发现那个 float: right;不适用于弹性元素。所以我不确定是否有可能做我想做的事，如果我删除 .d-flex class 定义然后我可以使用 .pull-right class 一切正常，然后文本不会垂直居中。

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

所以最后看起来我有两个不完整的选项：要有需要向右浮动但垂直居中不起作用的列，或者要有垂直居中但不能浮动列。

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

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

Answer 1

据我了解，您需要在大屏幕上以不同的顺序显示您的项目。你为什么不在 HTML 代码本身中命令它们的替代品？请检查 fiddle 如果您正在寻找相同的内容，请告诉我。

<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%;
  }
}

这是工作fiddleusing CSS

Bootstrap 3 使行的列向右浮动

Bootstrap 3 make row's column float to right

javascript

html

css

twitter-bootstrap-3