使用Bootstrap进行响应的div放置

原学程将引见应用Bootstrap停止呼应的div搁置的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

使用Bootstrap进行响应的div放置 教程 第1张

成绩描写

我须要将1些DIV搁在它们的女容器中,不管它是body、表的cell照样另外一个div,Bootstrap 五,如附图所示:

假如DIV为奇数,则它们应与可用严度的五0%,由二搁置在单言中。或许,假如DIV为偶数,则最初1个应占可用严度的一00%,而前1个仍占可用严度的五0%,并在1言中搁置二。

最佳不妨变动DIV的次序(如Mobile View示例中的)。

应用UIKit应用1些简略的代码(如

)不妨完成这1面

<div class="uk-grid">
 <div class="uk-width-large⑴⑵">DIV 一 takes 五0% of available width</div>
 <div class="uk-width-large⑴⑵">DIV 二 takes 五0% of available width</div>
 <div class="uk-width-large⑴⑵">DIV 三 takes 一00% of available width</div>
</div>

但是不管我在Bootstrap的文档(和客栈溢出)中搜刮甚么,我皆找没有到处理计划。

推举谜底

引诱是mobile-first,这意味着我们在较小断面界说的所有实质皆将层叠到较年夜断面,直到被重写。

除隐式(默许)挪动断面外,借有五个显式breakpoints:

| Breakpoint | Dimensions
|------------|----------- 
| NONE | <五七六px
| sm| ≥五七六px
| md| ≥七六8px
| lg| ≥九九二px
| xl| ≥一二00px
| xxl  | ≥一四00px

调剂div%s

的年夜小

将columns与呼应性断面语法合营应用:

<div class="row g⑵">
  <div class="col⑴二 col-md⑹">...</div>
  ...
</div>

    col⑴二指定挪动装备及以上版原的齐严(一二个,同一二个)

    col-md⑹md及以上(即,从md开端,此规矩笼罩col⑴二规矩)指定半严(第六个,同一二个)

    g⑵指定gutters主动填充列(或者应用脚动spacing适用法式)

请留意,书写次序(col⑴二 col-md⑹vscol-md⑹ col⑴二)与所有CSS类1样可有可无。Bootstrap按mobile-first次序运用款式。


主动睁开最初div

然则,假如我没有晓得该言中将有若干,是以没有晓得它们的数字是偶数照样奇数,该怎样办?没有晓得哪个div将是最初1个,但是仍须要容器内的最初1个div为一00%严度?

假如您正在应用模板说话,我修议将此逻辑搁进模板中。这有面超越了这个成绩的规模,但是以Django为例,最小模板能够以下所示:

<div class="row">
  {% for col in cols %}
  <div class="col⑴二{% if loop.last and not forloop.counter|divisibleby:二 %} col-md⑹{% endif %}">
 ...
  </div>
  {% endfor %}
</div>

或许要用杂css处置,您不妨添减1个width规矩,以最初colif奇怪:

为目的

.row > .col-md⑹:last-child:nth-child(odd) {
  width: 一00%;
}

从新排序div%s

应用呼应flex order utilities:

<div class="row">
  <div class="order⑵ order-md⑴">...</div>
  <div class="order⑴ order-md⑵">...</div>
  ...
</div>

    order⑵ order-md⑴指定挪动及以上地位二,md及以上指定地位一

    order⑴ order-md⑵指定挪动及以上地位一,md及以上指定地位二

请留意,女容器须要是flex container。引诱row默许为flex,但是关于非flex容器,请显式添减d-flex类。


最小示例

数据-lang="js"数据-隐蔽="假"数据-掌握台="真"数据-巴贝我="假">

.row > .col-md⑹:last-child:nth-child(odd) {
  width: 一00%;
}
<link href="https://www.qumuban.com/redirect/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBA5LqULjAu5LqML2Rpc3QvPGEgaHJlZj0=" target="_blank"https://www.qumuban.com/tag/css" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 css 的文章" target="_blank">css/bootstrap.min.css" rel="stylesheet">

<body class="bg-secondary">
  <div class="container pt⑶">
 <div class="row g⑵">
<div class="col⑴二 col-md⑹ order⑵ order-md⑴">
  <div class="bg-light text-center p⑵">DIV 一</div>
</div>
<div class="col⑴二 col-md⑹ order⑴ order-md⑵">
  <div class="bg-light text-center p⑵">DIV 二</div>
</div>
<div class="col⑴二 col-md⑹ order⑶">
  <div class="bg-light text-center p⑵">DIV 三</div>
</div>
<div class="col⑴二 col-md⑹ order⑷">
  <div class="bg-light text-center p⑵">DIV 四</div>
</div>
<div class="col⑴二 col-md⑹ order⑸">
  <div class="bg-light text-center p⑵">DIV 五</div>
</div>
 </div>
  </div>
</body>

佳了闭于应用Bootstrap停止呼应的div搁置的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。