Ankündigung

Einklappen
Keine Ankündigung bisher.

Bootstrap deaktiviert andere .css Datein

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bootstrap deaktiviert andere .css Datein

    Hallo, nach verzweifelter Suche frage ich nun euch. Und zwar verwende ich Bootstrap
    Code:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    und möchte gleichzeitig aber auch meine eigene .css-Datei verwenden. Leider scheint Bootstrap meine css zu deaktivieren selbst wenn ich !importent verwende. Sobald ich inline css nutze funktioniert es aber was kann ich am besten tun?

  • #2
    Schau Dir in der Entwickler Console an, welche Reegeln aus welchen Css Dateien gelten und welche nicht.
    andenfalls lässt sich bootstrap sicher auch erweirtern:
    https://github.com/twbs/bootstrap-sass

    Kommentar


    • #3
      Alternativ kannst du auch auf Bootstrap verzichten, CSS lernen und deine eigenen CSS Regeln schreiben, der Lerneffekt ist um einiges höher, wobei du dir bei Bootstrap natürlich was abgucken darfst.

      Kommentar


      • #4
        Falls Interesse besteht, warum es dazu kommt:
        https://developer.mozilla.org/de/doc...pezifit%C3%A4t

        Grüße.

        Kommentar


        • #5
          Das mit der Spezifität sollte bekannt sein. Jedoch schrieb er
          selbst wenn ich !importent verwende.
          und !important überschreibt ja alle Stilangaben unabhängig von deren Spezifität.
          Wenn Bootstrap allerdings auch important verwendet ..... nun ja. Besser drauf verzichten, das sagt ja auch die MDN Seite.

          Der Hinweis von tomBuilder sollte einem auf die richtige Spur führen.

          EDIT: ist mir erst jetzt aufgefallen, als ich den Beitrag schrieb. Es heisst
          !important

          Kommentar


          • #6
            Zitat von tomBuilder Beitrag anzeigen
            Schau Dir in der Entwickler Console an, welche Reegeln aus welchen Css Dateien gelten und welche nicht.
            andenfalls lässt sich bootstrap sicher auch erweirtern:
            https://github.com/twbs/bootstrap-sass
            Wie du aus dem URL entnehmen kannst, will er Bootstrap 4, kein 3. Deswegen lautet der Link wie folgt (Bootstrap ist auf SCSS umgestiegen): https://github.com/twbs/bootstrap

            Ansonsten wie bereits erwähnt, mal schauen was von wem überschrieben wird. Das findest du am besten in den Developer Tools deines Browsers heraus. Beim einbinden der CSS Dateien im head ist auch die Reheinfolge wichtig. Binde zuerst Bootstrap ein und danach dein CSS. So kannst du auf einfache Weise das Bootstrap Zeug überschreiben. Gleicher Selektor ist ausreichend, der Browser wendet immer das zuletzt gefundene an, wenn die Selektoren gleich sind. Du solltest hier jedoch beachten, dass der Browser auch Eigenschaften ergänzt. Wenn du also nur deine Eigenschaften haben willst im überschriebenen Selektor, dann musst du die von Bootstrap auf Standard zurück setzen.

            Kommentar


            • #7
              Mhhh, die simpelste Ursache hierfür könnte sein, dass du Bootstrap nach deinen eigenen CSS Dateien einbindest. Um zu verhindern, dass Bootstrap deine eigenen CSS Regeln überschreibt, solltest du deine eigenen CSS Dateien natüurlich nach Bootstrap einbinden. Das schon einmal überprüft?

              Kommentar


              • #8
                Hört sich für mich eher so an, als würde seine CSS-Datei gar nicht geladen.

                Kommentar

                Lädt...
                X