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
Schacteln 2er div s nebneinander
#1
Ich habe ein Panel indem in unter einer Überschrift, links einen text und rechts daneben ein Bild haben möchte also eine Veschachtelung so zu sagen, nun habe ich schon einiges probiert aber immer rutschen der text und das bild dann aus dem eigentlichen panel raus. Ich gebe gern ein beipsiel wenn mir jemand helfen möchte. Schreibt mich einfach mal an, wäre euch echt mega dankbar.

Danke

Flo
Zitieren
#2
Eigentlich gibt es in Bootstrap 4 keine Panels mehr diese wurden durch Cards ersetzt.
Zum Verständnis wäre der Code schon Sinnvoll um zu sehen was du eigendlich machen willst!
Dies hier wäre eine Möglichkeit:

HTML5
  1. <div class="panel">
  2.             <div class="panal-top row">
  3.                 <div class="col-md-12 ">
  4.                     <h2 class="text-center">Uberschrift</h2>
  5.                 </div>
  6.             </div>
  7.             <div class="panel-body row">
  8.                 <div class="col-md-6">
  9.                     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  10.  
  11.                     <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend</p>
  12.                 </div>
  13.                 <div class="col-md-6">
  14.                     <img src="img/bild.jpg" class="img-fluid" />
  15.                 </div>
  16.             </div>
  17.         </div>



CSS
  1. .panel {
  2.             width: 500px;
  3.         }
  4.  
  5.         .panal-top {
  6.             background-color: #006;
  7.             color: #fff;
  8.             border: 1px solid #858585;
  9.         }
  10.  
  11.         .panel-body {
  12.             border: 1px solid #858585;
  13.             padding: 15px;
  14.         }


Zitieren
#3
Vielen Dank Error. Ich habe es genauso hin bekommen. Jetzt habe ich noch ein Problem und zwar wie erstelle ich 3 Panels bzw. Cards nebeneinander die immer die gleiche Höhe haben ? Aktuell passen sich diese immer an den Inhalt an und sind daher nicht gleich hoch. Ich habe gelesen das ganze ist mittels row-eq-height umsetzbar. Meine Versuche brachten aber keinen Erfolg. Ich habe die 3 Cards bereits mittels col-md4 nebeneinander bekommen. Nur das mit der Höhe will nicht funktionieren.
Zitieren
#4
Versuch es mal so:
HTML5
  1. <div class="d-flex flex-md-row flex-column">
  2.     <div class="card col-md-4  m-3">
  3.         <h5 class="card-title text-center">Card title</h5>
  4.         <div class="card-body row">
  5.             <div class="col-6">
  6.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  7.             </div>
  8.             <div class="col-6">
  9.                 <img src="img/001.jpg" class="img-fluid" />
  10.             </div>
  11.  
  12.         </div>
  13.     </div>
  14.     <div class="card col-md-4  m-3">
  15.         <h5 class="card-title text-center">Card title</h5>
  16.         <div class="card-body row">
  17.             <div class="col-6">
  18.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  19.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  20.             </div>
  21.             <div class="col-6">
  22.                 <img src="img/001.jpg" class="img-fluid" />
  23.             </div>
  24.  
  25.         </div>
  26.     </div>
  27.     <div class="card col-md-4 m-3">
  28.         <h5 class="card-title text-center">Card title</h5>
  29.         <div class="card-body row">
  30.             <div class="col-6">
  31.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  32.             </div>
  33.             <div class="col-6">
  34.                 <img src="img/001.jpg" class="img-fluid" />
  35.             </div>
  36.  
  37.         </div>
  38.     </div>
  39. </div>


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.

>