HTML Anfänger Frage wie bekomme ich zwischen zwei objekten einen Abstand hin

evian1 · 22. Mai 2017

hallo zusammen,

ich benutze Bootstrap und wollte nun einen Abstand einfügen sodass die Buttons zum Beispiel ansprechender aussehen das ist der Queltext und auf dem Bild sieht man wie das ganze dann ich echt
aussieht.

Es geht mir dabei um die Abstände zwischen den Knöpfen auf der rechten Seite

HTML:

<section>
	<div>
		<button type="button" class="btn btn-danger">Löschen</button>
		<button type="button" class="btn btn-success">Neu</button>
                <button type="button" class="btn btn-primary pull-center">Hilfe</button>

		
		<button type="button" class="btn btn-primary pull-right">Ok</button>
		<button type="button" class="btn btn-danger pull-right">Abbrechen</button>
		<button type="button" class="btn btn-success pull-right">Drucken</button>
	</div>
</section>

Was für ein Befehl muss man hinschreiben damit es einen Abstand gibt

quakegott · 22. Mai 2017

probiers mal mit <br>

Reglohln · 22. Mai 2017

<br>?

Bitte nicht.
Nutze die CSS-Eigenschaft "margin".

evian1 · 22. Mai 2017

Das habe ich schon versucht aber durch

HTML:

<br>  </br>

geht es um eine ganze Zeile runter

Ergänzung (22. Mai 2017)

mit der .css Datei habe ich mir das auch gedacht aber das Problem ist doch das es dann nicht mehr responsive ist wenn man den Bildschirm kleiner größer macht

Reglohln · 22. Mai 2017

Damit habe ich mich damals nicht beschäftigt, aber natürlich funktioniert das auch damit. Aber wie genau das funktioniert, weiß ich schlicht und ergreifend nicht. Schau dir mal den Code von computerbase an.

evian1 · 22. Mai 2017

Das is die Lösung

<section>

<div class="container">
<div class="navbar-text pull-right">

<div>
<div><button type="button" class="btn btn-success">Drucken</button>
<button type="button" class="btn btn-primary">Ok</button>
<button type="button" class="btn btn-danger">Abbrechen</button>
</div>
</div>
</section>

Reglohln · 22. Mai 2017

Ich glaube nicht.
Warum zig unnütze Elemente, wenn es doch einfach nur um den Abstand zwischen den rechten Buttons geht?
Mal ganz davon abgesehen, dass du deine ganzen <div>'s in der <div>-Suppe nicht wieder schließt.

Deine Lösung ist, zu verstehen, warum die linken Buttons Abstände haben. Ohne den CSS-Code kann dir auch keiner sagen, warum dem so ist.

thehintsch · 22. Mai 2017

Also wenn es schon daran hapert, was <br> bewirkt, dann würde ich erst mal ein Tutorial durcharbeiten. Meinerzeit war das SelfHTML Tutorial sehr populär und es wird immer noch gepflegt:
https://wiki.selfhtml.org/

kling1 · 22. Mai 2017

gib der section eine id und selecte halt die ganzen .pull-right dinger in der section.. und gib den dann ein margin.. hab aber kein plan von bootstrap.. sollte auch mit bootstrap boardmitteln gelöst werden können
hier ein beispiel https://jsfiddle.net/juc1hLky/

evian1 · 22. Mai 2017

das sieht sinnvoller aus

kling1 · 22. Mai 2017

ok hab eben kurz in bootstrap reingeguckt.. so solte es richtig sein
https://jsfiddle.net/juc1hLky/1/

evian1 · 22. Mai 2017

Danke für die Hilfe.

mit der CSS Datei funktionierts auch aber die Lösung von Kling ist an der Stelle für mich angebrachter

Ergänzung (22. Mai 2017)

Wenn wir schon dabei sind würde ich noch eine Frage mit anschließen

Ich habe auf der rechten Seite die Felder diese sind aber nicht synchron wie auf der rechten Seite obwohl sie im selben Container und selection sind.

hier mein Queltext für den Bereich

HTML:

<section>
<div class="row">
	<div class="col-md-4">								<!-- Box rechts außen -->      
		<div class="box box-info">						<!-- blaue Linie -->  
			<form class="form-horizontal">
				
				<div class="box-body">
					
					<div class="form-group">
							<label for="inputPassword3" class="col-sm-4 control-label">Initialien</label>
						<div class="col-sm-7">
							<input type="password" class="form-control" id="inputPassword3" placeholder="Initialien">
						</div>
					</div>	
					
				<div class="form-group">
							<label for="inputEmail3" class="col-sm-4 control-label">Pat ID</label>
						<div class="col-sm-7">
							<input type="Pat_ID" class="form-control" id="Pat_ID" placeholder="Pat IDD">
						</div>
					</div>	

				<div class="form-group">
							<label for="inputEmail3" class="col-sm-4 control-label">Pat ID</label>
						<div class="col-sm-7">
							<input type="Pat_ID" class="form-control" id="Pat_ID" placeholder="Pat IDD">
						</div>
					</div>	
					
				<div class="form-group">
							<label for="inputEmail3" class="col-sm-4 control-label">Pat ID</label>
						<div class="col-sm-7">
							<input type="Pat_ID" class="form-control" id="Pat_ID" placeholder="Pat IDD">
						</div>
					</div>	

						<div class="form-group">
							<label for="inputEmail3" class="col-sm-4 control-label">Pat ID</label>
						<div class="col-sm-7">
							<input type="Pat_ID" class="form-control" id="Pat_ID" placeholder="Pat IDD">
						</div>
					</div>	

				</form>
			</div>
		</div>
	</section> 
	
		
</section>

Ergänzung (22. Mai 2017)

classen waren nicht richtig beannant gelöst

Suche

HTML Anfänger Frage wie bekomme ich zwischen zwei objekten einen Abstand hin

evian1

Cadet 3rd Year

quakegott

Lt. Commander

Reglohln

Commander

evian1

Cadet 3rd Year

Reglohln

Commander

evian1

Cadet 3rd Year

Reglohln

Commander

thehintsch

Lieutenant

kling1

Gast

evian1

Cadet 3rd Year

kling1

Gast

evian1

Cadet 3rd Year

Ähnliche Themen