引導記分牌的頁面佈局

<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 -->

我試圖用引導和努力獲得的東西正確一字排開設計一個記分牌。是否可以在bootstrap中做到這一點？我放置了我想要做的事情的形象。

來源

2017-08-17 user990951

只是一個側面說明，我會用這個CSS的網格。 – 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>

來源

2017-08-17 05:00:39

嘗試上面的代碼，您沒有在頭部分中包含引導鏈接到CSS，並在主體部分中包含了引導鏈接到js。現在對於你來說，得分和進球排的其他部分應該很容易。試一下。 –

引導記分牌的頁面佈局

回答

相關問題