Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Frage zu tutorial
#1
Hallo,

ich habe eine Frage zu diesem Tutorial


https://bootstrap-forum.de/Tutorial/BS4-Hoehe.html


wie muß denn eigentlich der Code richtig aussehen ?
Code:
höhe 80

Code:
body { background-color: grey; } .bg-test { background-color:white ; } .h-80 { height: 80% !important; }


Ergenis ?

   


Das ist doch keine höhe von 80% ?
Zitieren
#2
im Prinzip möchte ich oben und unten einen Abstand von 20px haben das ganze ala "class="container" wegebn der breiter
daher sollte sich die höhe automatisch anpassen. Hauptsächlich ist das für Desktop PC gedacht
Zitieren
#3
CSS
  1. html,
  2. body {
  3. height: 100%;
  4. }
  5. .h-80 {
  6. height: 80% !important;
  7. margin-top: 10%;
  8. background-color: red;
  9. }



HTML5
  1. <div class="h-80">
  2. <h1>Höhe 80%</h1>
  3.  
  4. </div>



Wenn du eine Navigation benutzt solltest die die von den 80% abziehen!

Beispiel hei einer Höhe der Nav von 60px :
CSS
  1. height: calc(80% - 60px) !important;


Zitieren
#4
<p>irgendwie ist unten immer mehr abstand als oben ?</p><p><br></p><p>
Code:
html,body { height: 100%!important;}

body { background-color: grey; }

.bg-test { background-color:white ; }

.h-80 {margin-top: 20px!important;
    height: 90% !important;
    height: calc(90% - 20px) !important;}
</p><p><br></p><p>
Code:
    </p><div class="container bg-test h-80">
      <h1>Überschrift</h1>
    <div class="row">
        <div class="text-left col-md-8 pr-md-1">
            <div class="bg-info">links</div>
        </div>
        <div class="text-center col-md-4 pl-md-2">
            <div class="bg-primary">rechts</div>
        </div>
    </div>

</div>
<br><p></p>
Zitieren
#5
poste mal bitte dein ganzen html-code!
Zitieren
#6
<p>HTML komplett</p><p>
HTML5
  1. &lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br> &lt;meta charset="utf-8"&gt;<br>&nbsp; &nbsp; &lt;meta name=viewport" content="width=device-width, initial-scale=1"&gt;<br><br> &lt;link&nbsp; rel="stylesheet" type="text/css" href="css/bootstrap.css"&gt;<br> &lt;link&nbsp; rel="stylesheet" type="text/css" href="test.css"&gt;</p><p><br></p><p>CSS komplett</p><p>[geshi=css]html,body { height: 100%!important;} <br><br>body {<br>&nbsp; background-color: grey;<br>}<br><br><br><br><br>.bg-test {<br>&nbsp; background-color:white ;<br>}<br><br><br>.h-100 {<br>&nbsp; height: 100% !important;<br>}<br><br>.h-80 {<br>&nbsp; height: 80% !important;<br><br>}<br><br><br>.test {<br> margin-top: 25px!important;<br> }


<br> <br>&lt;/head&gt;<br><br>&lt;body&gt;<br><br><br>&lt;div class="container bg-test h-80"&gt;<br>&nbsp; &nbsp; &nbsp; &lt;h1&gt;Überschrift&lt;/h1&gt;<br>&nbsp; &nbsp; &lt;div class="row"&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="text-left col-md-8 pr-md-1"&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="bg-info"&gt;links&lt;/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="text-center col-md-4 pl-md-2"&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="bg-primary"&gt;rechts&lt;/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br>&nbsp; &nbsp; &lt;/div&gt;<br> <br> <br>&lt;/div&gt; &lt;!-- //&nbsp; END Container --&gt;<br><br>&lt;!-- fehlt noch<br> &lt;script src="Bootstrap/js/jquery-1.12.0.min.js"&gt;&lt;/script&gt;<br>--&gt;<br>&nbsp; &nbsp; &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;[/geshi]<br></p>


Angehängte Dateien Thumbnail(s)
   
Zitieren
#7
Sorry das Forum hat leider nach dem Update Probleme gemacht. Ich bin dabei eine Lösung zu finden!

Kannst du den Code nochmal posten!
Benutze bitte den Code Button.
Zitieren
#8
dann versuchen wir mal.

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name=viewport" content="width=device-width, initial-scale=1">

    <link  rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link  rel="stylesheet" type="text/css" href="test.css">
    
</head>

<body>


<div class="container bg-test test-mt h-100">
      <h1>Überschrift</h1>
    <div class="row">
        <div class="text-left col-md-8 pr-md-1">
            <div class="bg-info">links</div>
        </div>
        <div class="text-center col-md-4 pl-md-2">
            <div class="bg-primary">rechts</div>
        </div>
    </div>
    
    
</div> <!-- //  END Container -->

<!-- fehlt noch
    <script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
-->
    <script src="js/bootstrap.js"></script>
</body>
</html>
Code:
html,body { height: 100%!important;}

body {
  background-color: grey;
}




.bg-test {
  background-color:white ;
}


.h-100 {
   height: 95% !important;

}

.h-90 {
   height: 90% !important;

}

.h-80 {
   height: 80% !important;

}
Zitieren
#9
Lösung mit Flexbox "d-flex align-items-center"
CSS
  1. html,
  2.    body {
  3.       height: 100% !important;
  4.             background-color: grey;
  5.       }
  6.   .h-80 {
  7.       height: 80% !important;
  8.       }
  9.   .bg-test {
  10.       background-color: white !important;
  11.         }




HTML5
  1. <div class="h-100 d-flex align-items-center">
  2.     <div class="container bg-test test-mt h-80">
  3.         <h1>Überschrift</h1>
  4.         <div class="row">
  5.             <div class="text-left col-md-8 pr-md-1">
  6.                 <div class="bg-info">links</div>
  7.             </div>
  8.             <div class="text-center col-md-4 pl-md-2">
  9.                 <div class="bg-primary">rechts</div>
  10.             </div>
  11.         </div>
  12.     </div>
  13. </div>


Zitieren
#10
Das klappt Wunderbar.

ich kann doch trozdem weiter folgendes verwenden oder muß ich jetzt bei flexbox bleiben ?

Code:
col-md
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Schacteln 2er div s nebneinander
Last Post: The-Error
Gestern 11:37
» Replies: 3
» Views: 69
Navbar Dropdown 2 columns funktioniert n...
Last Post: Niamh
Gestern 11:29
» Replies: 2
» Views: 20
PostgreSQL oder mariaDB bei sehr grossen...
Last Post: rustybatman
Gestern 09:18
» Replies: 0
» Views: 8

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 271
» Latest member: havor99
» Forum threads: 237
» Forum posts: 962

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>