Текст в начальной загрузке - ну не будет по центру - PullRequest
Новая
       7

Текст в начальной загрузке - ну не будет по центру

0 голосов
/ 14 ноября 2018

Я пытаюсь создать виртуальное колесо рулетки. Прямо сейчас мои проблемы строго эстетичны. В текстовом поле справа номер в #chipsInv не будет центрироваться, за исключением случаев, когда я помещаю html-тег "center", а затем по какой-то причине он создает огромное количество пустого пространства внизу.

Вот мой код, я пропустил Javascript, так как я предполагаю, что он не имеет значения: 

<!DOCTYPE html>
<html>

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
    #ball {
        position: absolute;
        left: 208px;
        top: 40px;
        z-index: 1;
        width: 20px;
        height: 20px;
        transition: top 1s;
    }
    
    #wheel {}
    
    form {}
    
    .row {
        padding: 20px;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-5">
                <img id="ball" src="ball.png" onclick="spin()"></img>
                <img id="wheel" src="Rwheelbg.png" onclick="spin()"></img>
            </div>
            <div class="col-lg-1">
                <button id="reset" onclick="reset()">Reset</button>
            </div>
            <div class="col-lg-6">
                <div class="well well-lg">
                    <span><center>Chips</center></span>
                    <br>
                    <span style="font-size: 180px; text-align: center;" id="chipsInv">10</span>
                    <!-- Why won't this center!? -->
                    <br>
                    <span style="float:right;" id="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></span>
                </div>
            </div>
            <!-- Row ends here -->
        </div>
        <p>Bet on:</p>
        <form action="">
            <input type="checkbox" name="21" value="310" id="310"> 21
            <br>
            <input type="checkbox" name="9" value="100" id="100"> 9
            <br>
            <input type="checkbox" name="14" value="120" id="120"> 14
            <br>
            <input type="checkbox" name="13" value="240" id="240"> 13
        </form>
        <p>Bet on up to four numbers. However, be warned, the more numbers you bet on, the lower your chip return will be.</p>
        <!-- container ends here -->
    </div>
</body>

</html>

1 Ответ

0 голосов
/ 14 ноября 2018

В Bootstrap, насколько вы можете / где можете, используйте классы Bootstrap для обеспечения нужного стиля, так как классы Bootstrap разработаны для совместимости друг с другом. 

  <div class="col-lg-6">
      <div class="well well-lg">
        <div class="text-center">Chips</div>
        <div class="text-center" style="font-size: 180px;" id="chipsInv">10</div>
        <div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>        
      </div>
  </div>

Если вы хотите, чтобы текст в вашем примере центрировался, вы можете просто добавить класс текстового центра рядом с вашими хорошо-lg классами, как показано ниже: 

  <div class="col-lg-6">
          <div class="well well-lg text-center">
            <div>Chips</div>
            <div style="font-size: 180px;" id="chipsInv">10</div>
            <div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>        
          </div>
  </div>

Дополнительно;

  • с Bootstrap, они рекомендуют вам использовать div где это возможно, а затем вы можете указать другое поведение, изменив классы этих div, такие как "d-inline" или "d-block".По этой причине я изменил ваши интервалы на div.
  • Убедитесь, что ваш div col-lg-6 содержится в div с классом "row", и что в соответствии с документами эти div указывают спецификацию col div при добавлении.вместе не превышают 12. Документы по сетке начальной загрузки
...