Блог

Главная - Вопросы по программированию - Несколько ссылок, выпадающих из строк

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

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

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

Вот мой код:

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

Текущий результат: Текущий результат
против
желаемого результата: Желаемый результат

Комментарии:

1. Похоже, вы используете инструменты, не потратив время на чтение их руководств. Вот что вам нужно . Существует причина, по которой вы нигде не увидите container row классы and для одного и того же элемента в Bootstrap v4, и вы никогда не увидите row col-* классы and для одного и того же элемента, а также a .container внутри другого .container .

2. Тем не менее, каждый из столбцов в строке не остается на одной строке при использовании тега ссылки

3. Bootstrap позволяет очень быстро создавать прототипы, не прибегая к исправлению большого количества (часто любого) пользовательских CSS. Взгляните на их блестящие новые стили карточек и начните с чистого листа

4. Опять же, не помогает. Как мне заставить ссылки размещаться внутри строки

5. Я прошу прощения за то, что не помог тебе, Тобиас. Наслаждайтесь изучением CSS.

Ответ №1:

вы неправильно используете строку и столбец начальной загрузки. 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>