Bootstrap-Integrierung klappt nicht

  • Hallo,

    ich scheitere leider mit der Bootstrap-Integrierung. Als Anleitung habe ich mich hier orientiert:
    http://holdirbootstrap.de/css/#grid-example-basic

    Ich möchte zwei Bilder (responsive) nebeneinander platzieren. Beim Verkleinern des Bildschirms sollen die Bilder untereinander sein.

    Ich habe folgenden Code eingegeben:

    <div class="container-fluid">
    <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
    </div>

    Mit diesem Code soll dies funktionieren, leider ist jedoch alles untereinander platziert. In meinem Shop funktioniert dieser Code allerdings.

    Hat jemand eine Idee? Muss ein Code in ''Zusätzliche CSS'' hinzugefügt werden?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Antwort: JA

    Du sprichst zb die Klasse col-md-6 an das heist die breite sollte max. 50% von der kompletten breite sein.
    wenn hierzu keine CSS da ist die angesprochen werden kann... kommt auch nix raus

  • Antwort: kann man ohne Link nicht sagen.

    Ist eine bootstrap.css o. ä. schon eingebunden? Welche Version von Bootstrap nutzt du? Am Besten du gibst uns mal einen Link zu deiner Seite.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Vielen Dank für die schnelle Antwort.

    Was für ein Code im ''Zusätzlichen CSS'' müsste denn eingegeben werden?
    Ich habe schon einige Codes ausprobiert, die allerdings sofort als fataler Fehler angezeigt wurden...

  • Ich habe es nun mit einen Bootstrap-Plugin getestet.
    Durch die Aktivierung des Plugins verschiebt sich aber u.a. meine Seite (Menü bleibt gleich groß, die Seite ist verkleinert).

    Eine bootstrap.css existiert noch nicht, ich habe es nach dem oben genannten Link aufgebaut.
    Wenn ich diesen Code in der zus. CSS eingebe....

    <!DOCTYPE html>
    <html lang="de">
    ...
    </html>

    ....werden mir diverse Fehler angezeigt.

    Ich möchte nur diese eine Funktion nutzen, dass zwei Bilder beim Verkleinern des Bildschirm untereinander stehen.
    Oder geht dies auch ohne Bootstrap?

  • Dafür braucht man kein bootstrap. (und dein o. g. css ist auch kein css code)
    Also mal deaktivieren und uns den Link zu deinem Blog geben.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • @Azrael_0815 Er braucht doch kein Bootstap nur um 2 Bilder neben-/untereinander anzeigen zu lassen.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Ich kann bzw. darf den Link zur Seite nicht hier veröffentlichen.
    Bei Bedarf schicke ich den Link per PN, wobei auf der Seite noch nicht viel zu sehen ist, da es sich erst einmal um eine Testseite handelt.

    Wie bereits erwähnt, sollen 2 Bilder nebeneinander (Bildanhang) und beim Verkleinern untereinander angeordnet sein (und responsive).
    Es soll eben so einfach wie möglich umgesetzt werden.

  • Vielen Dank :)
    Kann man noch einen Code hinzufügen, dass das 2. Bild erst bei der Hälfte angeordnet ist.
    Ich habe es bisher mit einer Tabelle umgesetzt, was man im Bildanhang (I.) sieht. So möchte ich es nutzen.

    Gebe ich es im div-Code ein, zeigt er es so wie bei Bildanhang (II.) an. Das 2. Bild sitzt direkt hinter dem 1.

  • Mit CSS - z.B.: LINK

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • <div>
    <div class="imagediv">BILD</div>
    <div class="imagediv">BILD</div>
    </div>

    div{
    text-align: center;
    width:100%;
    background-color:#ff0000; //ROT
    }

    .imagediv{
    max-width:45%;
    text-align:center;

    display:inline-block;
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!