So erstellen Sie Rahmen mit Bootstrap 3 Rahmenklasse

Question

Ich benutze die Klasse border- * Bootstrap, kann aber die Grenzen nicht sehen. 1. Was fehlt mir? 2. Wo ändere ich die Thikness der Grenze? 3. Warum gibt es eine kleine Lücke, der weiße Fleck zwischen den Zellen in der Outcoutine ergibt sich aus dem folgenden Code? 4. Ich benutzte die Klasse gerundet-0 und es scheint immer noch vorhanden zu sein, warum?

Danke im Voraus für jede Hilfe.

div { 
 
height: 50px; 
 
}

<!-- Jquery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <!-- BootStrap --> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <!--------------------------------------------------------------------------> 
 
    <div class="container-fluid row"> 
 
     <h1 class = 'page-header'> 
 
     Why the borders are not visible ? 
 
     </h1> 
 
     <h5>And why the radius box is still rounded if the class is rounded-0 ?</h5> 
 
    \t \t <div class='btn btn-primary rounded-0 col-xs-4'></div> 
 
    \t \t <div class='btn btn-primary rounded-0 col-xs-4 border-top-0'></div> 
 
    \t \t <div class='btn btn-primary rounded-0 col-xs-4 '></div> 
 
    \t \t <div class='btn btn-primary rounded-0 col-xs-4 border-left-0'></div> 
 
    \t \t <div class='btn btn-primary rounded-0 col-xs-4 '></div> 
 
    \t \t <div class='btn btn-primary rounded-0 col-xs-4 border-right-0'></div> 
 
    \t \t <div class='btn btn-primary rounded-0 col-xs-4'></div> 
 
    \t \t <div class='btn btn-primary rounded-0 col-xs-4 border-bottom-0'></div> 
 
    \t \t <div class='btn btn-primary rounded-0 col-xs-4'></div> 
 
    \t </div>

Answer 1

ich nur in der Datei Bootstrap.css für 'border-top-0' sah, 'border-right-0' ... Diese Klassen sind nicht in Bootstrap gegeben obwohl es in Bootstrap-Doku geschrieben ist. Aber vielleicht könnten Sie diese Klassen selbst erstellen.

zum Beispiel:

.border-top-0{ 
    border-style: solid; 
    border-top: none; 
} 

und die Rahmenbreite einzustellen: border-width: 1px;