Question

请我使用bootstrap 4 beta来构建一个网站，这些列不会叠加在移动设备上，但是当我使用谷歌浏览器来调整窗口大小时。即使在Chrome响应模式下，它们也不会叠加有什么帮助吗？

  <!--main-->
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <section class="news-items">
                    <h1>AfEI News</h1>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-4 col-sm-6 col-12 col-lg-3">
                                </div>
                                <div class="col-md-4 col-sm-6 col-12 col-lg-3">
                                </div>
                                <div class="col-md-4 col-sm-6 col-12 col-lg-3">
                                </div>
                                <div class="col-md-4 col-sm-6 col-12 col-lg-3">
                                </div>
                            </div>
                        </div>
                </section>
            </div>
            <div class="col-md-3">
                <div class="row">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 aside-col" id="coming-up">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 aside-col" id="opportunities">
                    </div>

Answer 1

如果在调整窗口大小但在移动设备上无法正常使用时，则可能是您的head标签中缺少了它：

require(tidyverse)
#> Loading required package: tidyverse
#> Warning: package 'ggplot2' was built under R version 3.4.4
require(lubridate)
#> Loading required package: lubridate
#> 
#> Attaching package: 'lubridate'
#> The following object is masked from 'package:base':
#> 
#>     date

df <- structure(list(date = structure(c(16073, 16073, 16210, 16286, 
                                  16486, 16498, 16518, 16539, 16618, 16426, 16496, 16588, 16602, 
                                  16602, 16629, 16654, 16714, 16769, 16776, 17379), class = "Date"), 
               id = c(8843, 8843, 8843, 8843, 8843, 8843, 8843, 8843, 8843, 
                      8843, 8843, 8843, 8843, 8843, 8843, 8843, 8843, 8843, 8843, 
                      8843)), class = c("tbl_df", "tbl", "data.frame"), row.names = c(NA, 
                                                                                      -20L), .Names = c("date", "id"))

df %>% 
  group_by(id) %>% 
  nest() %>% 
  mutate(date_range = map(data, ~interval(min(.x$date), max(.x$date)))) %>% 
  unnest(date_range)
#> Warning in combine_all(args[[1]]): Vectorizing 'Interval' elements may not
#> preserve their attributes
#> # A tibble: 1 x 3
#>      id data              date_range
#>   <dbl> <list>                 <dbl>
#> 1  8843 <tibble [20 × 1]>  112838400

Answer 2

您是否尝试在实际的移动设备上查看？我注意到使用chrome响应元素和dev选项实际上并不模拟移动设备。此外，您无需使用col-md-12只需使用col即可自动适应。

您还应该使用bs4的当前完整版本，这是文档。 https://getbootstrap.com/docs/4.0/layout/grid/

Answer 3

这是因为你把所有这些放在一起像

＆＃13;

<div class="col-sm-6 col-xs-6" >
 </div>
  <div class="col-sm-6 col-xs-6" >
 </div>
 <div class="col-sm-6 col-xs-6" >
 </div>
  <div class="col-sm-6 col-xs-6" >
 </div>

＆＃13;

因此，在这种情况下，浏览器难以正确对齐，因为当空间被填满时，它不知道将第三个放置在哪里。

所以你需要做的是告诉浏览器使用bootstrap类本身将它放在下一行

<div class="row" >
<div class="col-sm-6 col-xs-6"  >
test
     </div>
      <div class="col-sm-6 col-xs-6" >
      test
     </div>
</div>
 <div class="row" >    
     <div class="col-sm-6 col-xs-6" >
     test
     </div>
      <div class="col-sm-6 col-xs-6" >
      test
     </div>
   </div>

现在你会得到它。

Bootstrap列没有堆叠

3 个答案: