时间戳

首页 > 解决方案 > Bootstrap CSS：浏览器尺寸更改时保持卡片按钮位置

css - Bootstrap CSS：浏览器尺寸更改时保持卡片按钮位置

问题描述

我正在尝试创建在用户浏览器尺寸发生变化时保持其按钮位置的卡片。

桌面全屏：
全宽可用

调整浏览器大小时：
更窄的浏览器窗口

当浏览器调整大小时，我试图将卡片按钮保持在相同的位置。但在我的示例中，“Upvote”按钮移动到文本下方，而不是保留在右侧。更具体地说，看看这张照片：

标记的图像显示保留空间

绿色空间应该为按钮保留，红色空间应该是按钮的位置：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

<div class="row justify-content-center">
<div>
<div class="container">
      <div class="card m-2">
        <div class="card-body">
          <div class="container p-1">
            <img
              src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg"
              class="float-left mr-1"
              alt=""
              width="60px"
              heigth="60px"
            />
            <div class="row">
              <div class="col-md-11 pr-5">
                <h5 class="card-title">Kion Bar 2 - Best energy bar there is no</h5>
                <p class="card-text">Best energy bar there is, no other like this that can even..</p>
              </div>
              <div class="col-md-1 ml-md-auto align-self-center">
                <a href="#" class="btn btn-outline-secondary float-right">
                  Upvote
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 </div>
 </div>

标签： cssbootstrap-4

解决方案

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="media align-items-center">
          <img width="10%" class="align-self-center mr-3" src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg" alt="Generic placeholder image">
          <div class="media-body">
            <div class="row align-items-center">
              <div class="col-md-9 col-9">
                <h5 class="mt-0">Kion Bar 2 - Best energy bar there is no</h5>
                <p>Best energy bar there is, no other like this that can even..</p>
              </div>
              <div class="col-md-3 col-3">
                <a href="#" class="btn btn-outline-secondary float-right">
                  Upvote
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

如果你使用媒体会更好，它会让你的工作更轻松。也.container应该在一个部分中只使用一次。

  • 容器提供了一种居中和水平填充站点内容的方法。使用 .container 响应像素宽度或 .container-fluid 宽度：在所有视口和设备尺寸上为 100%。
  • 行是列的包装器。每列都有水平填充（称为装订线），用于控制它们之间的空间。然后在具有负边距的行上抵消此填充。这样，列中的所有内容在视觉上都在左侧对齐。
  • 在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。

您可以查看以下链接以供参考

Bootstrap的网格系统

媒体

推荐阅读