Bootstrap 记分牌页面布局

Question

<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 设计一个记分牌，并努力让所有东西正确排列。是否可以在 bootstrap 中执行此操作？我放置了我正在尝试做的事情的图像。

Answer 1

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

Bootstrap 记分牌页面布局

Bootstrap scoreboard page layout

html

css

angular-ui-bootstrap

bootstrap-4