Question

任何人都可以帮助我使用Bootstrap 4 alpha版本解决以下场景吗？

我有不同的桌面和移动布局。

对于桌面，布局看起来像，

.............................................
. ------------- ------------- ------------- .
. .  1        . . 2         . .   3       . .
. .  Col-4    . . Col- 4    . .           . .
. ------------- ------------- .  Col-4    . .
. --------------------------- .           . .
. .   4                     . .  With     . .
. .   Col-8                 . .  some     . .
. .                         . .  height   . .
. .                         . .           . .
. --------------------------- ------------- .
.............................................

对于移动，布局看起来像，

...............................
. --------------------------- .
. .   1                     . .
. .   Col-12                . .
. --------------------------- .
. --------------------------- .
. .   2                     . .
. .   Col-12                . .
. --------------------------- .
. --------------------------- .
. .    3                    . .
. .   Col-12                . .
. .                         . .
. .   With                  . .
. .   Some                  . .
. .   Height                . .
. --------------------------- .
. --------------------------- .
. .   4                     . .
. .   Col-12                . .
. .                         . .
. .                         . .
. .                         . .
. --------------------------- .
...............................

我尝试过拉动和推动，但没有结果。

我希望这个解决方案只使用CSS。

我有JavaScript解决方案，但为此我需要重新初始化 3rd 列，这是重要组件。

以下是我目前的实施：Fiddle

Answer 1

Flexbox以alpha 6开头，所以beta在这种情况下确实不会产生巨大的差异（尽管class names have changed from alpha-6 to beta）。 Bootstrap 4（稳定版）今天（1/18/18）推出。

使用flexbox时，每行中的cols高度相同，不适用于所需的桌面布局。我会在d-md-block上使用row来覆盖较大（md）屏幕上的display:flex。然后使用float-left和float-right将列定位在桌面上。 flexbox仍将在较小的屏幕上启动，因此浮动将被忽略，cols将按预期垂直堆叠。

https://www.codeply.com/go/sTvrYlB1V0

<div class="container-fluid">
  <div class="row h-100 d-md-block d-flex">
    <div class="col-12 col-md-4 float-left">
      1 Some content
    </div>
    <div class="col-12 col-md-4 float-left">
      2 Some content
    </div>
    <div class="col-12 col-md-4 special-height float-right">
      3 Some other content
    </div>
    <div class="col-12 col-md-8 special-height-small mt-2 float-left">
      4 Special content
    </div>
  </div>
</div>

Answer 2

尝试这样：

<div class="row">
   <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">

      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Div 1</div>

      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Div 2</div>

       <!-- Only Visible For Mobile And Tablets -->
      <div class="col-sm-12 col-xs-12 hidden-lg hidden-sm">Div 3</div>

      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">Div 4</div>
   </div> 

    <!-- Only Visible For DeskTop -->
   <div class="col-lg-4 col-md-4 hidden-sm hidden-xs">Div 3</div> 
</div>

桌面中的列的特殊排列和使用Bootstrap 4

2 个答案: