位置

职位-Bootstrap 5和Material Design 2.0

使用这些助手可以快速配置元素的位置。


基本例子

固定顶

从一个边缘到另一个边缘将元素定位在视口的顶部。确保您了解 项目中固定位置的影响;您可能需要添加其他CSS。


          <div class="fixed-top">...</div>
        

固定底

从一个边缘到另一个边缘将元素定位在视口的底部。确保你了解 项目中固定位置的影响;您可能需要添加其他CSS。


          <div class="fixed-bottom">...</div>
        

粘顶

从头到尾将元素放置在视口的顶部,但仅在滚动后 过去了。 .sticky-top 实用程序使用CSS的 position:sticky ,该位置 并非所有浏览器都完全支持。


          <div class="sticky-top">...</div>
        

响应式粘顶

还存在 .sticky-top 实用程序的响应变体。


          <div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
          <div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
          <div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
          <div class="sticky-xl-top">
            Stick to the top on viewports sized XL (extra-large) or wider
          </div>
        

位置值

尽管没有响应,但可以使用快速定位类。


          <div class="position-static">...</div>
          <div class="position-relative">...</div>
          <div class="position-absolute">...</div>
          <div class="position-fixed">...</div>
          <div class="position-sticky">...</div>
        

排列元素

使用边缘定位实用程序轻松排列元素。格式是 {property}-{position}

其中 property 是以下之一:

  • top -用于垂直 top 位置
  • left -用于水平 left 的位置
  • 底部-用于垂直的底部位置
  • right -用于水平 right 的位置

其中 position 是以下之一:

  • 0 -用于 0 边缘位置
  • 50 -用于 50%边缘位置
  • 100 -用于 100%边缘位置

您可以通过将条目添加到 $ position-values Sass中来添加更多位置值 地图变量。


          <div class="position-relative position-relative-example">
            <div class="position-absolute top-0 start-0"></div>
            <div class="position-absolute top-0 end-0"></div>
            <div class="position-absolute top-50 start-50"></div>
            <div class="position-absolute bottom-50 end-50"></div>
            <div class="position-absolute bottom-0 start-0"></div>
            <div class="position-absolute bottom-0 end-0"></div>
          </div>
        

          .position-relative-example { height: 200px; width: 100%; background-color: #f5f5f5; }
          .position-relative-example div { width: 2em; height: 2em; background-color: #343a40;
          border-radius: .25rem; }
        

中心元素

此外,您还可以使用transform Utility类将元素居中 .translate-middle

此类应用转换 translateX(-50%) translateY(-50%)到元素,结合边缘定位 实用程序,可让您将元素绝对居中。


          <div class="position-relative position-relative-example">
            <div class="position-absolute top-0 start-0 translate-middle"></div>
            <div class="position-absolute top-0 start-50 translate-middle"></div>
            <div class="position-absolute top-0 start-100 translate-middle"></div>
            <div class="position-absolute top-50 start-0 translate-middle"></div>
            <div class="position-absolute top-50 start-50 translate-middle"></div>
            <div class="position-absolute top-50 start-100 translate-middle"></div>
            <div class="position-absolute top-100 start-0 translate-middle"></div>
            <div class="position-absolute top-100 start-50 translate-middle"></div>
            <div class="position-absolute top-100 start-100 translate-middle"></div>
          </div>
        

          .position-relative-example { height: 200px; width: 100%; background-color: #f5f5f5; }
          .position-relative-example div { width: 2em; height: 2em; background-color: #343a40;
          border-radius: .25rem; }
        

其他例子

以下是这些类的一些实际示例:


          <button
            type="button"
            class="btn btn-primary position-relative"
            data-mdb-ripple-unbound="true"
          >
            Mails
            <span
              class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary"
              >+99 <span class="visually-hidden">unread messages</span></span
            >
          </button>

          <button
            type="button"
            class="btn btn-dark position-relative"
            data-mdb-ripple-unbound="true"
          >
            Marker
            <svg
              width="1em"
              height="1em"
              viewBox="0 0 16 16"
              class="position-absolute top-100 start-50 translate-middle bi bi-caret-down-fill"
              fill="#212529"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
              />
            </svg>
          </button>

          <button
            type="button"
            class="btn btn-primary position-relative"
            data-mdb-ripple-unbound="true"
          >
            Alerts
            <span
              class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"
              ><span class="visually-hidden">unread messages</span></span
            >
          </button>
        

您可以将这些类与现有组件一起使用来创建新的组件。记住你可以 通过向 $ position-values 变量添加条目来扩展其功能。


          <div class="position-relative" style="width: 100%">
            <div class="progress" style="height: 1px">
              <div
                class="progress-bar"
                role="progressbar"
                style="width: 50%"
                aria-valuenow="25"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
            </div>
            <button
              type="button"
              class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill"
              style="width: 3rem; height: 3rem"
            >
              1
            </button>
            <button
              type="button"
              class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill"
              style="width: 3rem; height: 3rem"
            >
              2
            </button>
            <button
              type="button"
              class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill"
              style="width: 3rem; height: 3rem"
            >
              3
            </button>
          </div>