it-swarm.com.de

Wie kann man mit Bootstrap 4 flexbox verfügbaren Inhalt füllen?

Ich habe eine eckige App, die Bootstrap 4 verwendet. Ich habe eine Navigationsleiste, die an der Spitze haftet, und ich möchte Inhalte hinzufügen, die den verbleibenden Platz im Browser ausfüllen. Abgesehen von der Navigationsleiste oben, habe ich noch ein anderes div, das selbst Kopf- und Fußzeileninhalt enthält. Zwischen Kopf- und Fußzeile habe ich einen Hauptinhaltsabschnitt, und ich möchte, dass dieser Abschnitt (#two in meinem Beispiel unten) den leeren Bereich ausfüllt. 

Ich dachte, ich könnte css flexbox verwenden, um dies zu erreichen, aber mein einfaches Flexbox-Beispiel ohne Bootstrap schien nichts zu tun, als ich in die Bootstrap-Welt kam. Ich habe diese Dokumente verwendet, um das herauszufinden.

Ich dachte, die Verwendung von align-self-stretch sollte dazu beitragen, dieses Ziel zu erreichen, aber irgendwie sieht es so aus, als ob die enthaltenen Elemente sich gerade so groß bemessen würden, dass sie meinen #outer-Inhalt aufnehmen können. Es gibt also keine Erweiterung der Flexbox. Ich habe naiv versucht, einfach height:100%-Stile zu den enthaltenden Divs hinzuzufügen, um etwas Dehnung zu bekommen, aber das schien nicht zu helfen.

Ich habe dieses Plunker-Beispiel basierend auf der Antwort von @ ZimSystem erstellt. Sein Beispiel schien genau so zu funktionieren, wie ich es wollte, aber als ich versuchte, die Änderungen in meinen einfachen Winkelcode zu integrieren, passierte das Flex-Stretching nicht. Ich bin nicht sicher, was ich mache, um die Konvertierung zu brechen.

 enter image description here

Dies ist die Gesamtheit der Winkelkomponente, die ich gerade betrachte:

<div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
        header content <br>
        another line <br>
        And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
        main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
        footer content
    </div>
</div>

Und hier ist der Anwendungscontainer mit der Navigationsleiste und dem Einspritzpunkt:

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav"> 
            <li class="nav-item"><a class="nav-link" routerLink="/flex">My flex view</a></li>
        </ul>
    </nav>
    <router-outlet></router-outlet>
</div>  

Wie kann ich erreichen, dass mein #two div erweitert wird, um den Bereich auszufüllen, während meine #one- und #three-divs als Inhaltsheader und -fußzeilen am oberen und unteren Rand des Inhaltsbereichs verankert werden?

34
Chris Farmer

Update Bootstrap 4.1.0

Die Klassen flex-grow-1 und flex-fill sind in Bootstrap 4.1.0 enthalten

Update Bootstrap 4.0.0

Fügen Sie eine flex-grow-Klasse wie folgt hinzu:

.flex-grow {
    flex: 1 0 auto;
}

Dann können die Utility-Klassen für den Rest des Layouts verwendet werden:

 <div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link">Item 1</a></li>
        </ul>
    </nav>
    <div id="outer" class="d-flex flex-column flex-grow">
        <div id="one" class="">
            header content
            <br> another line
            <br> And another
        </div>
        <div id="two" class="bg-info h-100 flex-grow">
            main content that I want to expand to cover remaining available height
        </div>
        <div id="three" class="">
            footer content 40px height
        </div>
    </div>
</div>

https://www.codeply.com/go/3ZDkRAghGU

30
Zim

Ihre Komponente ist in ein <flex>-Element eingeschlossen, das dasselbe Flexbox-Styling benötigt, um auch vertikal gestreckt zu werden, damit sich der Inhalt dehnt. Das Hinzufügen von class="d-flex flex-column flex-grow" zum <flex> wird funktionieren. Hier ist eine Arbeitsgabel von Ihrem Plunker-Beispiel .

4

Das Problem bei der Verwendung von ZimSystems Markup in Ihrem Angular-Plunker ist, dass die Komponente mit dem Tag flex als zusätzlicher Container in den gerenderten HTML-Code eingefügt wird:

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        ...
    </nav>
    <router-outlet></router-outlet>
    <flex>
        <div id="outer" class="d-flex flex-column flex-grow">
            ...
        </div>
    </flex>
</div>

Damit es wie vorgesehen funktioniert, können Sie das äußere Div aus der Komponente entfernen und die Flex-Klassen im Host-Container der Komponente festlegen, wie in diesem modifizierten Plunker gezeigt.

import {Component, NgModule, HostBinding, VERSION} from '@angular/core'
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser'

@Component({
    selector: 'flex',
    template: `
        <div id="one" class="">
            header content
            <br> another line
            <br> And another
        </div>
        <div id="two" class="bg-info h-100 flex-grow">
            main content that I want to expand to cover remaining available height
        </div>
        <div id="three" class="">
            footer content
        </div>
    `
})
export class FlexComponent {
    @HostBinding('class') classes = 'd-flex flex-column flex-grow';  
    ...
}
3
ConnorsFan

Wenn Sie das Verhalten der verwendeten Klasse nicht steuern können. Entfernen Sie einfach alles und verwenden Sie nur diese CSS.

html,
body,
flex {
  height: 100%;
  margin: 0;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.two {
  background-color: #123;
  flex-grow: 1;
  color: #FFF;
}
<flex>
  <div class="outer">
    <div class="one">
      Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br>
    </div>
    <div class="two">
      Hey. This is body
    </div>
    <div class="three">
      Hey. This is footer <br> Hey. This is footer <br>
    </div>
  </div>
</flex>

2
Duannx
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.flex-grow {
  flex: 1;
}

Fügen Sie eine Wrapper-Komponente hinzu, die Ihre Inhaltsblöcke enthält, und wenden Sie die Klasse flex-grow auf die Klasse an, die Sie den verbleibenden Speicherplatz füllen möchten.

1
Sara

Sie können die Komponente zum Wachsen bringen, um den Container zu füllen, und dann auch als flexible Spalte verwenden, damit der Inhalt ebenfalls wächst. Verwenden Sie dazu :Host, um das Komponentenelement als Ziel festzulegen.

flex.component.ts

  @Component({
    selector: 'flex',
    template: `

  <div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
      header content
      <br> another line
      <br> And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
      main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
      footer content
    </div>
  </div>        

    `,
    styles: [':Host {flex: 1 0 auto; display: flex; flex-direction: column }']
  })

Ich habe das plunk aktualisiert.

0
JayChase

CSS

html, body {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

flex.components.ts

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'flex',
  Host: {'class': 'flex-grow'},
  template: `

<div id="outer" class="d-flex flex-column h-100 flex-grow">
  <div id="one" class="">
    header content
    <br> another line
    <br> And another
  </div>
  <div id="two" class="bg-info flex-grow">
    main content that I want to expand to cover remaining available height
  </div>
  <div id="three" class="">
    footer content
  </div>
</div>        

  ` 
})
export class FlexComponent {
  constructor() {}
}

Ergebnis - https://plnkr.co/edit/vQS7Jw58zmlVshz9YmQ8?p=preview Danke :)

0
grinmax