CSS Bootstrap überschreibt mein eigenes CSS

Ich bin versuchen, um eine split-button in meine website (ASPNET WebForms). Bisher ist die einzige split-Taste Implementierung, die ich wie ist die von Bootstrap. Ich bin nicht mit jeder anderen Funktion von Ihrem Rahmen. Jedoch, sobald ich einfügen:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

Meine eigenen css ist ein Chaos. Ich versuchte, Sie zu isolieren, nur die Klassen, die ich brauchen würde für das splitbutton, aber ich war nicht in der Lage, erfolgreich zu tun.

Dies ist mein html-code für das splitbutton-mit der gekennzeichneten Klassen

<div class="btn-group">
                          <button type="button" onclick="NewPost();return false;" class="btn btn-primary">Enviar</button>
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
                          <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Enviar con notificaciones</a></li>
                          </ul>
                    </div>

Weiß jemand einen Weg, um zu isolieren, die Wunsch-Klassen? Oder vielleicht zeigen Sie mir eine andere Umsetzung ein splitbutton, die ist ähnlich wie diese-und cross-browser? Ich googelte viel, aber das einzig brauchbare eine, die ich fand, war bootstrap.

InformationsquelleAutor Joe | 2014-10-01

19

Ist eine gute Faustregel. Immer setzen Sie das stylesheet mit den Regeln, die Sie sein wollen angesehensten letzten. Sie haben wahrscheinlich
```
<link rel="stylesheet" href="/css/mystyles.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
```
Also alle Stile, die deklariert werden in der bootstrap-css überschreiben verkaufen. stattdessen versuchen
```
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyles.css">
```
Diese Weise die Regeln im stylesheet haben mehr Vorrang.

Abgesehen davon, dass Sie vielleicht besser nicht mit der minified-version von bootstrap-so können Sie entfernen Sie alle widerstreitenden Klassen zu erleichtern.

Deine Lösung nicht funktionieren, wenn es keine Schaltfläche Formatvorlage definiert in Ihr eigenes css (für den Fall, Sie möchten, verwenden Sie den browser, die Standard-button-style).
Richtig, es funktioniert nur, wenn Sie wollen, überschreiben die Stile, wie das, was der OP Probleme mit.

InformationsquelleAutor Bryan
5

Gehen Sie auf die Customizer auf getbootstrap.com http://getbootstrap.com/customize/

Schalten Sie die Sachen, die man braucht:

Dann Sie Sie herunterladen.

Öffnen Sie es. Blick auf die base Stile und der globalen box-sizing:border-box.

Entweder ändern Sie alle Ihre CSS-arbeiten mit box-sizing: border-box (google es), oder dass man auf die :before, :after, und das element über alle bootstrap-css für Formulare, Schaltflächen und dropdown (Sie arbeiten zusammen).

InformationsquelleAutor Christina
1

Wie gesagt in den anderen Lösungen, die auf dieser Seite, es gibt Möglichkeiten, wie:
1. Erstellen einer benutzerdefinierten bootstrap-css von bootstrap-website
2. Platzieren Sie Ihre benutzerdefinierten Stile, die Sie nicht wollen, bootstrap überschreiben, nach der bootstrap-style-tags auf der Seite
Meiner Erfahrung nach, erstellen Sie eine benutzerdefinierte bootstrap css oder editieren, entfernen Sie nicht benötigte Klassen-oder style-Regeln ist nicht so praktisch. Dies ist, weil, wenn eine neuere version von bootstrap ist, Sie brauchen durch zu gehen die umständliche Prozedur wieder.

Stattdessen könnte man fortfahren mit überschreiben der bootstrap-styles mit Ihrer eigenen Stile, die nach der bootstrap-styles, mit ein weiterer Schritt, die mehr effektiv helfen, Sie zu verhindern, dass andere überschreiben die Stile.

Können Sie einen Blick auf die Spezifität der CSS-Stile auf http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ oder https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Ein Beispiel könnte sein, schreiben einen Stil
```
.btn {
    background: red;
}
```
als
```
#mypage .btn {
    background: red;
}
```
wo mypage könnte eine ID der Eltern-die meisten Elemente der Seite (kann den body-tag?).
Dies würde machen Sie Ihre Stil-Regeln, die spezifischer als diejenigen definiert sind, die in der bootstrap-CSS, dann werden Sie nicht mehr in der Lage zu überschreiben deins dann.

Bitte beachten Sie, dass der obige code-snippet ist nur eine Abbildung, und Sie könnte auf jeden Fall besser schreiben-Stile für die Ursache.

InformationsquelleAutor myTerminal
0

machen Ihrem stylesheet die letzten importierten css-Datei.

Es bietet eine Antwort auf die Frage... eine falsche Antwort, aber noch eine Antwort.
Wie ist es falsch? Cascade Style sheets. Daher Cascading Style Sheets. Indem Sie Ihre eigenen benutzerdefinierten css letzten wird over-ride Eigenschaften in TBS.

InformationsquelleAutor ndesign11
0

Ich bin mir nicht sicher, ob dies Ihre Frage beantworten genau, aber was ich in all meinen BS-3-Projekten ist:

In meinem Kopf:
```
<link rel="stylesheet" href="custom.css">
```
In custom.css
```
@import boostrap.less //or the fully compiled bootstrap css
//all your custom stuff, overrides, etc. down here
```
Diese Weise laden wir boostrap den ersten, aber etwas benutzerdefinierte möchten Sie tun, wird letztes geladen was bedeutet, Ihre Chancen zu überschreiben sind hoch und nicht zu Konflikten führen. Auch ist es eine Zeile und eine Menge Reiniger für Ihren <head>

InformationsquelleAutor Jared Eitnier
0

So einfach weniger zu Streifen heraus, die BS-Komponenten, die Sie nicht brauchen. Kompilieren und minifizieren eine bootstrap.min.css-Datei und importieren Sie diese in Ihrem stylesheet mit:

@import url("bootstrap.min.css"); am Anfang. Dann im HTML einfach Ihre CSS-und diese werden Lesen nach.

InformationsquelleAutor Luke

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.