Bootstrap mobile Ansicht

Moin,
ich komme mittlerweile mit Bootstrap ganz gut zurecht und bin mit meiner Oberfläche relativ zufrieden. Jetzt habe ich jedoch 2 kleine "Schönheitsfehler" die ich korrigieren möchte, allerdings habe ich bis jetzt noch keine Lösung gefunden. Bevor ich hier um den heißen Brei herumrede zeigen ich euch lieber ein paar Bilder

Fall 1:
Die Bilder 1, 2 und 3. Auf dem Dektop sieht man eine statische Fußleiste. Sie zeigt eigentlich nur links Copyright mit Namen und rechts einen Link zum Impressum. Auf dem iPhone 4S mit 3,5" sieht das ganze noch gut aus (da Auto-Zeilenumbruch). Auf größeren Geräten wie dem S3 mit 4" (?) ergibt sich ein Problem, siehe Bild 3. Der Link ist nun neben das Copyright gequetscht (Ja das Bild ist vom iPhone ich habe nur rausgezommt um den Effekt zu simulieren. Auf meinem S3 sieht es aber genau so aus ). Wie kann ich also bis zu einer gewissen Bildschirmbreite einen Zeilenumbruch erzwingen?

Der HTML Code den die Seite produziert sieht so aus:

<div class="navbar navbar-default navbar-fixed-bottom">
	<div class="container">
		<p class="navbar-text pull-left">
			© Copyright 2014-2015, Max Mustermann
		</p>
		<p class="navbar-text navbar-right">
			<a href="/terms">Impressum & Datenschutz</a>
		</p>
	</div>
</div>

Fall 2:
Die Bilder 4 und 5. Das ist ein Ausschnitt aus meiner Benutzerverwaltung. Auf dem Desktop sind die beiden Buttons nebeneinander unter der "well" (dem grauen Teil) angeordnet. Die Buttons beginnen und enden auch an den Rändern der "well" und nicht am eigentlichen Seitenende. Aber auf Mobilgeräten sind die Buttons untereinander (auch wenn ich das Gerät drehe, obwohl dann eigentlich genug Platz sein müsste). Das würde mich auch nicht stören, wenn die Buttons alle gleichlang wären und zentriert. Wie stelle ich das an?

Der HTML Code den die Seite produziert sieht so aus:

<div class="row">
	<div class="form-group col-md-6">
		<form action="/users/1/edit" method="GET">
			<button type="submit" class="btn btn-lg col-md-12 btn-primary">
				<span class="glyphicon glyphicon-pencil"></span> Benutzer bearbeiten
			</button>
		</form>
	</div>
	<div class="form-group col-md-6">
		<form action="/users/1/delete" method="GET">
			<button type="submit" class="btn btn-lg col-md-12 btn-primary">
				<span class="glyphicon glyphicon-trash"></span> Benutzer entfernen
			</button>
		</form>
	</div>
</div>

Könnt ihr mir da weiterhelfen?

Gruß

Ich habe gleich 2 erfreuliche Nachrichten:
1. Ich habe den Fehler mit der Navbar behoben, indem ich das pull-left durch navbar-left ausgetauscht habe. Sieht jetzt so aus.

<!-- Sorry, jetzt ist es richtig ^^ -->




<div class="navbar navbar-default navbar-fixed-bottom">
	<div class="container">
		<p class="navbar-text navbar-left">
			© Copyright 2014-2015, Max Mustermann
		</p>
		<p class="navbar-text navbar-right">
			<a href="/terms">Impressum & Datenschutz</a>
		</p>
	</div>
</div>

Der Text wird jetzt automatisch gebrochen oder erst nebeneinander gesetzt, wenn auch ausreichend Platz ist.

2. Ich habe glaube ich verstanden was "mediaquerys" sind und was sie machen, habe sogar welche in meiner Anwendung (unbewusst). Man sieht es vllt. auf den Bildern aus meinem ersten Post. Auf mobilen Geräten nutze ich die gesamte Seite während ich auf großen Geräten ein padding hinzufüge mit das Anmeldeformular nicht so an der Decke "klebt".

Aber die unerfreuliche Nachricht:

Ich habe noch nicht so ganz verstanden wie ich die Mediaquerys in meinem Fall anwende. Bin leider auch nicht so mit CSS vertraut. Z.b. lege ich die Länge der Butons mit "col-md" fest. Wie nutze ich nud Media Querys um die Länge zu verändern? Oder gibt es eine Möglichkeit das Bootstrap die Länge der Buttons automatisch anpasst und ich nichtmehr mit der fixen col-md Länge arbeiten muss?

Gruß

Danke, erstmal für die CSS Snippets, werde ich gleich mal ausprobieren.
lauras: Ja das ist eine gute Frage. Mir ist aber wieder eingefallen, warum ich das so gemacht habe. Der zweite Button den du hier in meinem Code siehst ist nur symbolisch. Da ich per klick auf den Delete Button ein DELETE request an die /users route sende (RESTful nennt sich das ganze, glaube ich ^^) kommt ein Link nicht in Frage. Ich wollte euch nur ersparen hier den auszug aus meinem Code zu zeigen (Laravel forms). Sieht so aus:

{{ Form::open(array('url' => 'users/' . $user -> id)) }}
{{ Form::hidden('_method', 'DELETE') }}
{{ Form::button('<i class="glyphicon glyphicon-trash"></i> Entfernen', array('type' => 'submit', 'class' => 'btn btn-primary')) }}
{{ Form::close() }}

Und ich habe dann für den anderen Button ebenfalls eine Form genommen. Ich fand so hat sich mein Quellcode "konstanter" gelesen.

Aber da ich das mittlerweile nicht mehr so mache, sondern erst ein Modal zeige, auf dem dan der Delete Button ist, werde ich das jetzt durch links ersetzen (da ich um das Modal zu zeigen eben einen Link benutze, mit "btn" in den Klassen).
@ lauras: Okay, alles durch Links ersetzt, deine Klasse und den CSS Snippet verwendet: Klappt wunderbar. Sollte mich wohl mal mehr mit CSS beschäftigeg. Das war ja praktisch kaum Code den ich hinzufügen musste

Aber noch eine Frage: Warum funktioniert das? Bzw. Warum erzeugt Bootstrap nun einen Zeilenumbruch wenn die Button kleiner werden?

Ah okay, dankesehr Jetzt hat es klick gemacht!