Question

在桌面上我想要2列。在手机上我想只有一列。

<div class="home">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-md-8 col-xs-12> 
...content---
</div>
<div class="col-lg-4 col-md-4 col-xs-12>
...content...
</div>
</div>
</div>
</div>

不幸的是，此代码不使用手机的全宽。我怎样才能做到这一点？

Answer 1

根据我对Bootstrap的理解，我会说你不需要代码中的所有col类。只是col-xs- *类。

<div class="home">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12> 
...content---
</div>
<div class="col-xs-12>
...content...
</div>
</div>
</div>
</div>

col-xs-12将在所有浏览器中显示相同的内容，并且它们也将重新格式化为较小的显示器。

我想补充一点，列需要在其中包含行，但我假设这就是内容。另一件事是确保使用的列加起来为12.这也会导致一些错误

Answer 2

Bootstrap首先是移动的。它只需要在您希望布局更改的最小断点处的列类。

<div class="container-fluid">
   <div class="row">
     <div class="col-md-8> 
         ...content...
     </div>
     <div class="col-md-4>
        ...content...
    </div>
  </div>
</div>

Answer 3

检查此代码....可能会解决您的问题。

select distinct 
  t.costcenter, 
  t.workplace, 
  t.sap_master_key, 
  t.product_family, 
  mb.max_module_name
from timings t
inner join max_bbz_per_timing mb
  on mb.timing_id = t.timing_id and mb.max_module_name is not null
where ($P{Kostenstelle} is not null or $P{APS} is not null)
  and ($P{Kostenstelle} is null or t.costcenter = $P{Kostenstelle}) 
  and ($P{APS}          is null or t.workplace  = $P{APS})

Answer 4

最后一堂课后没有引用的引号。

<div class="col-lg-8 col-md-8 col-xs-12"> 
...content---
</div>

手机上的Bootsrap全宽

4 个答案: