Question

我目前正在为网站开发TYPO3扩展程序。我正在使用bootstrap 4，我有三个不同的部分用于扩展。在网络上它应该看起来像：

A B
ç

并在移动设备上：

一个
乙
C

使用我目前的方法，移动视图很好： mobile view

A只是一个选择选择器，B是谷歌地图，C是结果。列有不同的高度。

Currenlty looking like on web

我的问题：我不希望C栏有这么大的余量。实际上我希望它只是在A列下面。

我的代码：

        <!DOCTYPE html>
        <f:layout name="Default" />
        <f:section name="main">
        <div class="row kleingaerten container">
                <select class="selectpicker col-12 col-sm-4" data-header="Wähle einen Bezirk"  data-live-search="true">
                    <option data-tokens="">Alle Bezirke</option>
                        <f:for each="{bezirke}" as="bezirk">
                            <option data-tokens="b{bezirk.uid}" >{bezirk.name}</option>
                        </f:for>
                </select>


            <div class="col-12 col-sm-8">
                <div id="map" style="width:100%; height:400px;" ></div>
            </div>


            <div class="col-12 col-sm-4">
                <f:for each="{kleingaerten}" as="kleingarten">
                    <div class="card  {kleingarten.bezirkClasses} " data-lat="{kleingarten.adresse.breitengrad}" data-lng="{kleingarten.adresse.laengengrad}" data-name="{kleingarten.titel}" data-strasse="{kleingarten.adresse.strasse}" data-hausnummer="{kleingarten.adresse.hausnummer}" data-plz="{kleingarten.adresse.postleitzahl}" data-ort="{kleingarten.adresse.stadt}" data-webauftritt='<a href="#">Kleingarten</a>'
                    id="g{kleingarten.uid}" data-id="g{kleingarten.uid}"
                    >
                        <div class="container">
                            <h7><b>{kleingarten.titel}</b></h7> 
                            <div>{kleingarten.adresse.strasse} {kleingarten.adresse.hausnummer}</div> 
                            <div>{kleingarten.adresse.postleitzahl}
                            {kleingarten.adresse.stadt}</div> 
                            <a href="#">Kleingarten</a>
                        </div>
                    </div>
                </f:for>
            </div>
    </div>
</f:section> 
</html>

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-12 col-md-4">
    <div>
      Part A
    </div>
    <div>
      Part B <br>
      Part B <br>
      Part B <br>
      Part B <br>
      Part B <br>
      Part B <br>
      Part B <br>
    </div>
  </div>
  <div class="col-12 col-md-8">
  Part C (Map part in your app)
  </div>
</div>

您不需要分成3个部分。

您可以将A和B插入一个div，例如代码段。

你需要改变

FROM

"col-12 col-sm-8"
"col-12 col-sm-4"

以

"col-8 col-sm-12" "col-4 col-sm-12"

Answer 2

只需按照以下步骤操作并在下面进行小提琴或片段。（调整屏幕大小以进行检查）

步骤1：首先创建B列并使用bootstrap类.float-md-right

步骤2：将A列设为第二个并添加class .order-first（用于移至顶部在移动视图中）

第3步：将C列放在最后。

在div中包含3列A，B，C并添加类.d-flex以使.order类工作，并且.flex-wrap类在屏幕大小更改时换行，并使用.d-md-block覆盖.d -flex并使其仅适用于移动设备

https://jsfiddle.net/raj_mutant/9vgL605f/

#map {
  background: green;
}

.a-section {
  background: yellow;
  height: 100px;
}

.c-section {
  background: red;
  height: 400px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container my-4">
  <div class="d-flex d-md-block flex-wrap">
    <div class="col-md-8 col-12  float-md-right">
      <div id="map" style="width:100%; height:400px;">B</div>
    </div>
    <div class="col-md-4 order-first">
      <div class="a-section">
        A
      </div>
    </div>
    <div class="col-md-4">
      <div class="c-section">
        C
      </div>
    </div>
  </div>
</div>

列间距Bootstrap 4

2 个答案: