Bootstrap 2 Buttons nebeneinander?

HI,

bin derzeit dabei, meine Website neu zu erstellen und das über Bootstrap. Jetzt hab ich das Problem dass ich 2 Buttons habe, die ich einfach nicht nebeneinander mit Abstand dazwischen bekomme. Sie soll auch jeweils bündig mit den Textfeldern sein.

Kann mir da wer helfen?

Im Bild sieht man, wie es derzeit aussieht.

Hier noch der Code:

https://hastebin.com/ogakusujiz.scala

Dazu sei gesagt, dass ich Bootstrap Neuling bin.

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

ozVetnik

11.06.2017, 17:17

Du fängst eine neue col an. Damit springst du in die nächste Zeile. Guck dir mal die Grid-Doku an.

Assassins89

Beitragsersteller

11.06.2017, 17:32

Hab ich auch schon ohne Probiert. Dann sind sie zwar in der gleichen Zeile aber zusammen ohne Abstand.

ozVetnik

11.06.2017, 17:40

@Assassins89

Okay, wie erkläre ich das einfach?
Du bist nicht Bootstrap Anfänger sondern HTML / CSS Anfänger.

Bootstrap hat viele vorgefertigte Komponenten, aber ein gewisses Grundwissen an HTML und CSS ist schon von Nöten.

Hier ist die Lösung zu deinem Problem.
https://jsfiddle.net/ptj5a1rr/

Google mal nach "margin" und "padding".

TitusPullo

11.06.2017, 17:48

@ozVetnik

Ein a-Tag um 2 Buttons? Fatal...

ozVetnik

11.06.2017, 17:53

@TitusPullo

Uiii fatal, die Welt geht unter...
Da hat jemand etwas übersehen. Mein Gott, schlag die Hände über dem Kopf zusammen.

TitusPullo

11.06.2017, 17:56

@ozVetnik

Fühl dich doch nicht gleich angegriffen, ich wollte nur darauf hinweisen. Er sollte die Fehler ja nicht gleich übernehmen.

TitusPullo

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

11.06.2017, 17:52

Die Summe der cols darf 12 nicht überschreiten. Mit deinen col Angaben bist du mit den offsets bei 21. Mach 2 col-6 Klassen und dem rechten Element gibst du noch die Klasse text-right damit es rechts ausgerichtet ist.

Ausserdem entferne die a-Tags um die Buttons die haben da nichts zu suchen. Entweder nur button oder nur link.

Woher ich das weiß:Berufserfahrung – Leidenschaftlicher Webentwickler

nspy99

11.06.2017, 21:21

Stimme dir teilweise zu. Aber warum sollte man um einen Button keinen <a>-Tag machen dürfen?

TitusPullo

12.06.2017, 22:28

@nspy99

Weil es keinen Sinn macht. Entweder hast du ein Button der eine action macht oder du hast ein Link der Verweist. Mir fällt kein Fall ein wo es Sinn machen würde beides zu nutzen.

Du kannst deine Seite ja auch komplett mit p Tags formatieren, Sinn macht aber auch das nicht.

Man sollte die Elemente schon dafür nutzen, wofür sie vorgesehen sind.

Assassins89

Beitragsersteller

11.06.2017, 19:36

Dein Tip hat mir den richtigen Anstoß gegeben. Jetzt hab ich es wie ich gern wollte.

So schaut der Code jetzt aus:

https://hastebin.com/zezepumeju.scala

TitusPullo

11.06.2017, 19:39

@Assassins89

Ja das sieht doch gut aus. Den linken Button brauchst du nicht zu floaten, kannst also die Klase "float-left" entfernen.

Ähnliche Beiträge

Wie kann ich mit HTML/ CSS DIV Tags bündig an den Rand anpassen?

Ich habe folgendes Problem mit Html/Css. Ich möchte gerne einen div tag auf einer Website ganz oben ansiedeln. Das einzige Problem was ich dabei habe ist, dass ich es nicht bündig hinbekomme. Zwar schließen die Div Tags untereinander bündig ab, aber jeweils am Rand der Website bleibt ein Spalt über. Mit Margin & Padding klappt es leider auch nicht. Ein Beispiel Quelltext habe ich hier:

<head>
<style type="text/css">
#do {
background-color:grey;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
#di {
background-color:red;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
</style>
</head>
<body>
<div id="do">
Hallo
</div>
<div id="di">
Hallo
</div>
</body>

PS: Das ist nur ein Beispiel, welches mein Problem verdeutlichen soll. Ich hoffe ihr könnt mir helfen.

...zum Beitrag

Wie bekomme ich einen Abstand zwischen zwei Buttons?

Ich programmiere gerade aus Langeweile eine kleine Website (erstmal nur mit HTML) und möchte einen größeren Abstand zwischen den Buttons bekommen, die nebeneinander sind. Welchen Code muß ich dafür verwenden?

So ist der Code bisher geschrieben:

Und das kommt dabei raus:

Und ich möchte den Abstand zwischen den beiden Buttons vergrößern (der Abstand mit dem Blauen Pfeil)

Wäre echt nett wenn mir jemand helfen könnte! ❤️

Danke im Voraus!! 🙏🙏🙏

...zum Beitrag

Custom 'Upload' Button?

Schönen guten Abend!

Ich baue derzeit eine kleine Website mit einer Upload Funktion für beispielsweise Videos und Bilder.

Dazu benötige ich das HTML-Element input mit dem Type file.

Während man beispielsweise normale Eingabefelder mit dem Type text etc. gut selbst 'darstellen' kann, fängt es beim type="file" schon an, dass man den Value des Buttons nicht selsbt bestimmen kann. Mal davon abgesehen, dass der im Button enthaltene Text von Browser zu Browser variiert.

Nun aber zur eigentlichen Frage:

Wie kann ich einen benutzerdefinierten File-Upload definieren?

...zum Beitrag

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

...zum Beitrag

3 Pilzinseln in Minecraft nebeneinander?

Ich habe in meiner Welt drei Pilzinseln nebeneinander gefunden. Es ist jeweils dazwischen immer Ozean (also das Biom). Wie selten ist das?

...zum Beitrag

Mein PC zeigt rote Streifen an was ist kaputt?

Mein Monitor von meiner PC zeigt etwa 5cm lange, waagerechte, rote Striche an. Diese sind mit geringem Abstand parallel und bündig über einander (senkrecht) über dem ganzen Bildschirm. Dieses is etwa 5 mal nebeneinander zu sehen. Sowie es ist alles viel größer (z.B. Programme, beim starten...) Was ist kaputt? Monitor, Grafikkarte...? Schon mal danke für eure Hilfe!

...zum Beitrag

Website Formular über URL ausfüllen

Hallo, wie kann ich auf einer Website bestimmte Häckchen setzen, Textfelder ausfüllen und Buttons betätigen und das nur über die URL? Also das die URL praktisch schon alle Informationen beinhaltet die ich eingeben möchte. Danke für Antworten.

...zum Beitrag

Cookie Benachrichtigung Bootstrap?

Ich habe meine Website komplett überarbeitet und auf die aktuellste Bootstrap Version migriert.

Auf meiner alten Seite hatte ich ein kleines Jquery Plugin, dass eine Meldung eingeblendet hat die der Besucher bestätigen musste, aus irgend einem Grund zerschießt mir dieses, mit der aktuellen Version jedoch jegliche Java Scripte.

Meine Seite ist ein privates Portfolio ohne Shop Funktionen oder ähnlichem, lediglich ein Kontaktformular und Email.

Im Menüband oben und im Footer unten sind jeweils 2 Links zu "Privacy" bzw "DSGVO" mit eigener Seite wo wirklich alles drin steht, was wie genutzt wird usw.
Das müsste dann doch reichen auch ohne so ein Fenster wo man aktiv bestätigen muss oder?

...zum Beitrag

bootstrap Modal beim Seiten-laden öffnen lassen, wie?

hallo ich habe ein bootstrap-modal und derzeit ein button womit sich das öffnet. ich will jetzt aber dass es sich direkt beim öffnen der seite öffnet, habe gegoogelt und JS scripts wie diesen gefunden aber da passiert einfach nix.

 $(window).load(function(){        
   $('#myModal').modal('show');
    });

wie lasse ich ein modal beim aufrufen öffnen ??

...zum Beitrag

JavaScript: Text nach Button-Klick in Textfeld?

Ich habe so eine Seite :

<li class="items">
    <p>some text 1</p>
    <div><button class="link" value="1">Wählen</a></div>
</li>
<li class="items">
    <p>some text 2</p>
    <div><button class="link" value="2">Wählen</a></div>
</li>
<li class="items">
    <p>some text 3</p>
    <div><button class="link" value="3">Wählen</a></div>
</li>



<form action="send" method="POST">
    <input type="text" name="text" id="text" required>
    <input type="number" name="zahl" id="zahl">
    <button type="submit" name="submit">Senden</button>
</form>

oben sind mehrere Texte mit je einem Button zum Auswählen (derzeit ohne funktion). Unten ist dann ein Formular und man kann selbst die Zahl des Textes dort eintragen.

Jetzt will ich das aber für leute vereinfachen und ermöglichen, dass man einfach auf den jeweiligen Button klickt und dann die Zahl (das value des Buttons) in das textfeld "number" eingetragen wird. Wie kann ich das mit javascript machen ? außerdem sollte der cursor direkt in das textfeld "text" gehen.

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

HTML, zwei Bilder nebeneinander (code?)

Hey, ich bekomm es grad nicht hin auf ner Website mit HTML 2 Bilder nebeneinander (mit kleinem abstand) zu positionieren, die landen immer untereinander.

das erste bild ist 400 hoch und 240 breit, das zweite soll dann in etwa angepasst werden, sprich auch 400 hoch und breite ergibt sich ja dann.

hat mir jemand den korrekten code ???

gruß und danke schon mal

...zum Beitrag

Excel Balkendiagramm Rubrik rechtsbündig?

Liebe Community,

ich habe folgendes Problem: Ich habe ein Balkendiagramm bei dem die Rubriken (also die Bezeichnungen links neben den Balken) z.T. so lang sind, dass sie über zwei Zeilen gehen. Leider fängt die jeweils zweite Zeile dann nicht bündig an (ob links oder rechts ist mir eigentlich egal), sondern in der Mitte und das sieht nicht so schön aus. Hat hier jemand eine Lösung - ohne Textfelder?

Schöne Grüße

Kenny

...zum Beitrag

Wie kann ich eine kontinuirliche Abfrage in C# mit Visual Studio ohne Buttons etc starten?

Hallo,

Ich möchte in einem Textfeld Zahlen, welche sich ständig ändern, wiedergeben.

Allerdings ändern sich die Zahlen erst dann, wenn man auf einen Button klickt.

Ziel ist es jedoch, dass sich die Zahl im Textfeld sofort ändern, wenn sich die Zahl ändert.

Leider bin ich Neuling in WPF/C# und weiß nicht, wie genau ich das machen soll, es müsste ja eine kontinuirliche Abfrage sein, ich habe die Ausgabe der Zahl in die Textbox aktuell in der Methode private void button(object sender, RoutedEventArgs e),

da ich nicht weiß, wohin sonst damit

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen