html - 使用 bootstrap 在文本末尾对齐一行中的列

标签 html css bootstrap-4 bootstrap-5

使用 Bootstrap 5 我想在一行上显示一个 div 和一个 Canvas ,直到 md 作为断点

我想在文本结束后立即填充 Canvas 目前每个部分的宽度相等

如何从 div 中删除未使用的空间?

canvas alignment

<link
      href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e756b7569" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />


 <section class="p-5">
      <div class="container">
        <div class="row g-4 bg-primary">
          <div class="col-md-6">
            <div>
              <p>
                first stuff
                <span>hi</span>
              </p>
              <p>
                second stuff
                <span>hii</span>
              </p>
              <p>
                third stuff
                <span>hiii</span>
              </p>
              <p>global stuff <span>hello</span></p>
            </div>
          </div>
          <div class="col-md-6 bg-dark">
            <canvas></canvas>
          </div>

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

最佳答案

您只需更改类和 的冒号属性的 md 之后写入的大小。我还提供了以下代码:

<html>
<head>
<!--<meta name="viewport" content="with=device-width, initial-scale=1.0">-->
<title>Header</title>
<link rel="stylesheet" href="style.css" />

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght@300;500;700&display=swap rel="stylesheet">
<link
  href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333465d435d41" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
</head>
<body>
<section class="p-5">
  <div class="container">
    <div class="row g-3 bg-primary">
      <div class="col-md-3">
        <div>
          <p>
            first stuff
            <span>hi</span>
          </p>
          <p>
            second stuff
            <span>hii</span>
          </p>
          <p>
            third stuff
            <span>hiii</span>
          </p>
          <p>global stuff <span>hello</span></p>
        </div>
      </div>
      <div class="col-md-9 bg-dark">
        <canvas></canvas>
      </div>
    </div>
  </div>
</section>

关于html - 使用 bootstrap 在文本末尾对齐一行中的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70952867/

相关文章:

javascript - 克隆行时清除隐藏输入

java - 从部署在 tomcat 服务器中的 JSP 打开共享本地文件夹(C 盘或 D 盘等)

html - 不同行中具有不同宽度的表格单元格

css - 如何在更少的时间内获得直接 child

html - 切换按钮在导航栏的 bootstrap 4 和 angular 7 应用程序中不起作用

bootstrap-4 - 在 blazor 客户端中显示模态对话框

javascript - 带有文本输入选项的 Jquery selectmenu 插件

javascript - 为基于网络的动画设置 FPS 基准?

jquery - BootStrap 下拉类不需要吗?

css - 在 CSS 中,如何根据 <ul> 列表中的级别为同一个 div 提供两种样式?