时间戳

首页 > 解决方案 > 为什么我的 Bootstrap 列不相邻？

html - 为什么我的 Bootstrap 列不相邻？

问题描述

我使用“bootstrap builder”网络应用程序来生成此代码，以确保我做对了。但它在我的网站上显示不正确。为什么？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container-flex border rounded">
  <div class="row">
    <div class="col-md-1">
      <img src="images/solobee-card.png" </div>
      <div class="col-md-9">
        s
      </div>
      <div class="col-md-2">
        s
      </div>
    </div>
  </div>

标签： htmltwitter-bootstrapbootstrap-4

解决方案

没有container-flex实用程序类，而是使用container（用于固定宽度）或container-fluid（用于全窗口宽度）

您可以在此处查看容器的概述

注意：你也没有关闭标签img

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container border rounded">
  <div class="row">
    <div class="col-md-1">
      <img src="images/solobee-card.png" />
    </div>
    <div class="col-md-9">
      s
    </div>
    <div class="col-md-2">
      s
    </div>
  </div>
</div>

<hr />

<div class="container-fluid border rounded">
  <div class="row">
    <div class="col-md-1">
      <img src="images/solobee-card.png" />
    </div>
    <div class="col-md-9">
      s
    </div>
    <div class="col-md-2">
      s
    </div>
  </div>
</div>

推荐阅读