Несколько ссылок, выпадающих из строк - PullRequest
Новая
       1

Несколько ссылок, выпадающих из строк

0 голосов
/ 20 апреля 2019

Я создал два элемента div, которые используются в качестве кликабельных ссылок, однако я не могу заставить их оставаться рядом. Если я использую строку, то два div'а остаются только рядом, когда не используется тег link. Как только тег ссылки будет применен, div будут выпадать из строк. Как я мог это исправить?

Вот мой код: 

<div class="container col-md-12 pt-5">
    <h1 style="font: Helvetica; font-weight: normal; font-size: 230%">Administrator Control Panel</h1>
    <hr>
    <div class="container col-md-12 row" style="height: 140px;">
      <!-- Sports Box -->
      <a href="" style="width: 100%; height: 100%;">
        <div id="Sport" href="" class="col-md-2 h-100 px-0" style="background-color: #167acc; border-radius: 10px;">
          <h3 class="text-white" style="float: left; position: absolute; top: 30%; left: 5%; transform: translate(-10%, -40%); margin:15px;">Sports</h3>
          <p class="text-white" style="float: right; position: absolute; top: 15%; left: 78%; transform: translate(-50%, -10%);">You have</p>
          <h3 class="text-white" style="float: right; position: absolute; top: 40%; left: 83%; transform: translate(-50%, -40%);">18</h3>
          <p class="text-white" style="float: right; position: absolute; top: 63%; left: 81%; transform: translate(-50%, -40%);">Sports</p>
          <div style="background-color: white; border:solid #167acc; border-radius: 10px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-width:1px; position: absolute; bottom: 0; width: 100%;">
            <p style="float: left; margin:5px; padding-left: 10px; font-size: 75%;">Manage Them</p>
          </div>
        </div>
      </a>
      <!-- Options Box -->
      <a href="" style="width: 100%; height: 100%;">
      <div class="col-md-2 h-100 px-0" style="margin-left:5px; background-color: #5bba4a; border-radius: 10px;">
        <h3 class="text-white" style="float: left; position: absolute; top: 30%; left: 5%; transform: translate(-10%, -40%); margin:15px;">Options</h3>
        <p class="text-white" style="float: right; position: absolute; top: 15%; left: 78%; transform: translate(-50%, -10%);">You have</p>
        <h3 class="text-white" style="float: right; position: absolute; top: 40%; left: 83%; transform: translate(-50%, -40%);">18</h3>
        <p class="text-white" style="float: right; position: absolute; top: 63%; left: 81%; transform: translate(-50%, -40%);">Options</p>
        <div style="background-color: white; border:solid #5bba4a; border-radius: 10px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-width:1px; position: absolute; bottom: 0; width: 100%;">
          <p style="float: left; margin:5px; padding-left: 10px; font-size: 75%;">Manage Them</p>
        </div>
      </div>
      </a>

      </div>
    </div>
  </div>

Текущий результат: Current Outcome против Желаемый результат: Desired outcome

1 Ответ

0 голосов
/ 20 апреля 2019

вы неправильно используете строку и столбец начальной загрузки. container - пользователь для блока. затем вы должны создать row, а затем column. запустить код и просмотреть его на полной странице. Прокомментируйте, если вам нужны какие-либо разъяснения

Проверьте эту ссылку для получения дополнительной информации о строке и столбце 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container pt-5">
        <h1 style="font: Helvetica; font-weight: normal; font-size: 230%">Administrator Control Panel</h1>
        <hr>

        <div class="row">
            <div class="col-sm-4" style="height: 140px;">
                <!-- Sports Box -->
                <a href="" style="width: 100%; height: 100%;">
                    <div id="Sport" href="" class=" h-100 px-0" style="background-color: #167acc; border-radius: 10px;">
                        <h3 class="text-white" style="float: left; position: absolute; top: 30%; left: 5%; transform: translate(-10%, -40%); margin:15px;">Sports</h3>
                        <p class="text-white" style="float: right; position: absolute; top: 15%; left: 78%; transform: translate(-50%, -10%);">You have</p>
                        <h3 class="text-white" style="float: right; position: absolute; top: 40%; left: 83%; transform: translate(-50%, -40%);">18</h3>
                        <p class="text-white" style="float: right; position: absolute; top: 63%; left: 81%; transform: translate(-50%, -40%);">Sports</p>
                        <div style="background-color: white; border:solid #167acc; border-radius: 10px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-width:1px; position: absolute; bottom: 0; width: 92.3%;">
                            <p style="float: left; margin:5px; padding-left: 10px; font-size: 75%;">Manage Them</p>
                        </div>
                    </div>
                </a>

            </div>
            <div class="col-sm-4" style="height: 140px;">
                <a href="" style="width: 100%; height: 100%;">
                    <div class=" h-100 px-0" style="margin-left:5px; background-color: #5bba4a; border-radius: 10px;">
                        <h3 class="text-white" style="float: left; position: absolute; top: 30%; left: 5%; transform: translate(-10%, -40%); margin:15px;">Options</h3>
                        <p class="text-white" style="float: right; position: absolute; top: 15%; left: 78%; transform: translate(-50%, -10%);">You have</p>
                        <h3 class="text-white" style="float: right; position: absolute; top: 40%; left: 83%; transform: translate(-50%, -40%);">18</h3>
                        <p class="text-white" style="float: right; position: absolute; top: 63%; left: 81%; transform: translate(-50%, -40%);">Options</p>
                        <div style="background-color: white; border:solid #5bba4a; border-radius: 10px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-width:1px; position: absolute; bottom: 0;width: 90.8%;">
                            <p style="float: left; margin:5px; padding-left: 10px; font-size: 75%;">Manage Them</p>
                        </div>
                    </div>
                </a>
            </div>

        </div>

    </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...