Wie behebe ich den folgenden Rand in einem HTML bei der Verwendung von Bootstrap CSS?

Der folgende HTML verwendet einige gegebene Stylesheets, die ich mag, aber in diesem Fall wird der Text zu viel nach links geschoben, wenn ich die Klasse "container" verwende. Ich würde nur die Klasse "Container" ändern wollen, so dass der Text nicht so viel geschoben wird, während die HTML die gleiche ziemlich (einschließlich der CSS-Zeiger) beibehalten. Ist das möglich?Wie behebe ich den folgenden Rand in einem HTML bei der Verwendung von Bootstrap CSS?

<html> 

<head>

habe ich versucht, die Lösung unter:

<html> 

<head> 

<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script> 
<script src="jquery.urlshortener.js" type="text/javascript"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <!-- Latest compiled and minified JavaScript --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 


</head> 

<body> 

<style> 
.padding0 
{ 
    padding: 0px !important; 
} 
</style> 

<div class="container padding0"> 
This appears too much to the right. 
</div> 
</body> 
</html> 
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script> 
<script src="jquery.urlshortener.js" type="text/javascript"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <!-- Latest compiled and minified JavaScript --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 


</head> 

<body> 

<div class="container"> 
This appears too much to the right. 
</div> 
</body> 
</html>

noch nicht nach links ausgerichtet (auf Firefox).

Quelle

2017-01-10 kloop

Ihre Containerklasse hat padding-left und padding-right 15 px. Sie können eine Klasse padding0 hinzufügen, um das Auffüllen von Padding zu vermeiden.

.padding0 
 
{ 
 
    padding: 0px !important; 
 
}

<html> 
 

 
<head> 
 

 
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script> 
 
<script src="jquery.urlshortener.js" type="text/javascript"></script> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
 

 

 
</head> 
 

 
<body> 
 

 
<div class="container padding0"> 
 
This appears too much to the right. Not anymore :) 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-01-10 16:51:04 Deep

danke! Es bewegte sich nur ein kleines bisschen, es ist immer noch ziemlich in der Mitte. Gibt es eine Möglichkeit, den Rand ganz verschwinden zu lassen? – kloop

@kloop ist Ihr Code anders als das, was wir in dem obigen Ausschnitt haben, hier ist es jetzt linksbündig. – Deep

Bootstrap reagiert. Als solches basierend auf verschiedenen Bildschirmbreiten hat es Breiteneigenschaften, die der Containerklasse zugewiesen sind. Für die Breite unter 970px ist es 750px, darüber hat es 970px. und da der Rand automatisch für den Container ist, wird er zentriert ausgerichtet.

Wenn Sie nicht Responsive Design verwenden, dann folgende Klasse machen:

.container{margin: 0 0; padding: 0 0;}

aber es wird empfohlen, dies nicht zu tun, so dass Sie die folgenden erstellen:

<style>.marPad0{margin: 0 0; padding: 0 0;</style> 
<div class="container marPad0"> 
    This appears too much to the right. 
</div>

Dies wird lösen dein Problem.

Quelle

2017-01-10 17:10:57 rambo

Wie behebe ich den folgenden Rand in einem HTML bei der Verwendung von Bootstrap CSS?

Antwort

Verwandte Themen