多个链接溢出行

问题描述 投票：-2回答：1

我创建了两个用作可点击链接的div但是我不能让它们并排存在。如果我使用行，则两个div仅在不使用链接标记时并排放置。一旦应用了链接标记，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 vs期望的结果：Desired outcome

css bootstrap-4
1个回答
-1
投票

你以错误的方式使用bootstrap行和列。 container是用户阻止。然后你必须创建一个row然后column。运行代码并在整页上查看它。如果您需要任何澄清，请评论

Check this link for more info about row and 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.