Bootstrap Anzeiger Seitenlayout

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container" style="border:1px solid black;"> 
 
    
 
    <div class="text-center"> 
 
    <div class="col-md-4"> 
 
     <div class="text-left"> 
 
     <div class="text-center"> 
 
      <h1>54</h1> 
 
      <h1> Team1 </h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class ="text-center"> 
 
     <h1>Game Day</h1> 
 
     </div> 
 
    </div> 
 
     <div class ="col-md-4"> 
 
     <div class="text-right"> 
 
      <div class="text-center"> 
 
      <h1> 56 </h1> 
 
      <h1> Team6 <h1> 
 
       </div> 
 
      </div> 
 
</div><!-- /.container -->

ich eine Anzeigetafel mit Bootstrap zu entwerfen versuchen und kämpfen, um die Dinge zu bekommen, um richtig aufgereiht. Ist es möglich, dies im Bootstrap zu tun? Ich habe das Bild von dem gemacht, was ich versuche zu tun.

Quelle

2017-08-17 user990951

nur eine Randnotiz, ich würde CSS-Grid für diesen verwenden. – Stavm

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<!-- Required meta tags --> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

<!-- Bootstrap CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
</head> 
<body> 



<div class="container" style="border:1px solid black;"> 

<div class = "row"> 
<div class = "col-lg-2"> <h1>54   </h1></div> 
<div class = "col-lg-8" style=" text-align: center;"><h1>Game Day</h1> </div> 
<div class = "col-lg-2"> <h1>56</h1></div> 

</div> 

<div class = "row"> 
<div class = "col-lg-2"> <h1>Team1   </h1></div> 
<div class = "col-lg-8"><h1>  </h1> </div> 
<div class = "col-lg-2"> <h1>Team6</h1></div> 

</div> 

</div> 

<div class = "container"> 
<div class = "row"> 
<div class = "col-lg-3"> </div> 
<div class = "col-lg-2"> </div> 
<div class = "col-lg-1" style=" text-align: center;"> Team 1 </div> 
<div class = "col-lg-1" style=" text-align: center;"> Team 2 </div> 
<div class = "col-lg-1" style=" text-align: center;"> Team 3 </div> 
<div class = "col-lg-4"> </div> 

</div> 

<div class = "row"> 
<div class = "col-lg-3"> </div> 
<div class = "col-lg-2" style=" text-align: center;" > <h4 class="text-success"> Score </h4> </div> 
<div class = "col-lg-1 " style=" text-align: center; border:1px solid black; margin: 3px "> 54 </div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 15</div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 34</div> 
<div class = "col-lg-4"> </div> 
</div> 


<div class = "row"> 
<div class = "col-lg-3"> </div> 
<div class = "col-lg-2" style=" text-align: center; "> <h4 class="text-success"> Goal </h4> </div> 
<div class = "col-lg-1 " style=" text-align: center; border:1px solid black; margin: 3px "> 70 </div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 70</div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 70</div> 
<div class = "col-lg-4"> </div> 
</div> 



<div class = "row"> 
<div class = "col-lg-3"> </div> 
<div class = "col-lg-2"> <h1>   </h1></div> 
<div class = "col-lg-1" style=" text-align: center;"> Team 1 </div> 
<div class = "col-lg-1" style=" text-align: center;"> Team 2</div> 
<div class = "col-lg-1" style=" text-align: center;"> Team 3</div> 
<div class = "col-lg-1" style=" text-align: center;"> Team 4</div> 
<div class = "col-lg-3"> </div> 
</div> 


<div class = "row"> 
<div class = "col-lg-3"> </div> 
<div class = "col-lg-2" style=" text-align: center; "> <h4 class="text-success"> Score </h4> </div> 
<div class = "col-lg-1 " style=" text-align: center; border:1px solid black; margin: 3px "> 52 </div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 26</div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 56</div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 36 </div> 
<div class = "col-lg-3"> </div> 
</div> 


<div class = "row"> 

<div class = "col-lg-3"> </div> 
<div class = "col-lg-2" style=" text-align: center; "> <h4 class="text-success"> Goal </h4> </div> 
<div class = "col-lg-1 " style=" text-align: center; border:1px solid black; margin: 3px "> 70 </div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 70</div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 70</div> 
<div class = "col-lg-1" style=" text-align: center; border:1px solid black; margin: 3px "> 70 </div> 
<div class = "col-lg-3"> </div> 
</div> 

</div>  




<!-- jQuery first, then Tether, then Bootstrap JS. --> 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</body> 
</html>

Quelle

2017-08-17 05:00:39

versuchen Sie den obigen Code, Sie haben nicht den Bootstrap-Link zu css im Header-Abschnitt und Bootstrap-Link zu js im Body-Abschnitt enthalten. Der andere Teil der Punkte- und Torreihen sollte jetzt für Sie einfach sein. Versuche es. –

Bootstrap Anzeiger Seitenlayout

Antwort

Verwandte Themen