Question

我正在尝试在用户屏幕的底部放置一个栏，但只在一列内。如果我希望元素在整个屏幕上伸展，我可以使用position:fixed; bottom:0;，但我无法弄清楚如何让栏保持在列中。例如，见图片

在上图中，我希望Like，Comment，Share框始终位于用户屏幕的底部，但保持在其所在的列中。

我正在使用bootstrap 4，你可以在这里看到网站：https://www.arelplane.com/@arelenglish

编辑：

页面的HTML

<div class='container-fluid user-profile'>
  <div class='row'>
    <div class='col-md-3 col-12 d-none d-md-block remove-lr-padding' id='sticky-sidebar'>
      <div class='row mt-5 mb-5 align-center'>
        <div class="col-12">
          Some text
        </div>
      </div>
      <div class="row social-module">
        <div class="col-4">
          Like
        </div>
        <div class="col-4">
          Comment
        </div>
        <div class="col-4">
          Share
        </div>
      </div>
    </div>
    <div class='col-md-9 col-12 remove-lr-padding' id='user-map'>
      <div class="user-map" id="cesiumContainer"></div>
    </div>
  </div>
</div>

CSS

.social-module {
  background-color: blue;
  // position:fixed;
  bottom:0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

编辑2：

小提琴：https://jsfiddle.net/arel/9t3tnhzt/3/

Answer 1

这就是让栏位于栏目底部的方式：

<div class="d-flex align-items-end">...</div>

或者，将align-items-end类添加到该列。

Bootstrap 4中不需要自定义css。

这是一个有效的例子：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container-fluid user-profile">
    <div class="row">
        <div class="col-4 remove-lr-padding" id="sticky-sidebar">
            <div class="row text-center">
                <div class="col-12 bg-warning" style="min-height: 100vh;">
                    <p>Feature requests? Questions?</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate temporibus assumenda molestias laborum ipsam quisquam, nisi, aspernatur quia, ratione ipsum illo cum exercitationem nostrum dolor corrupti ducimus sunt provident harum. Eum, ullam id! Adipisci perspiciatis reiciendis minus quisquam culpa nobis voluptatem suscipit iusto dolores hic ab impedit incidunt rem labore praesentium, sed itaque voluptates distinctio vero temporibus quia atque magni ratione. Ratione, sit maiores asperiores architecto deserunt ducimus dignissimos? Error doloremque reiciendis repellendus esse dolor at expedita non. Ipsum maxime optio quasi, ratione pariatur excepturi aperiam. Dolores nisi magni est suscipit placeat nobis quaerat fugit culpa laboriosam, quam autem aut nesciunt fuga reiciendis dolor omnis doloremque ab corporis dicta adipisci eos amet ipsa. Qui beatae possimus pariatur nemo ducimus autem, architecto officia libero nisi quo, a earum repellendus explicabo cumque quidem consequatur sapiente ipsam molestias molestiae, nostrum sed nesciunt neque. Ex accusantium inventore quam! Commodi tempora eligendi possimus nam ut similique quidem, rem enim, quo quisquam autem accusantium! Suscipit error a quidem adipisci. Repellat maxime nesciunt id quasi deleniti, consectetur, est eius commodi doloremque odit, fugiat! Consequatur modi distinctio reiciendis natus et quibusdam eum doloribus temporibus delectus obcaecati laboriosam earum, ad eveniet! Ea, necessitatibus perferendis, nostrum aperiam saepe voluptates reiciendis odit, quis porro ipsa omnis ab iste doloribus, cupiditate nobis eos enim cum molestias facilis laudantium ex. Hic at impedit in alias.</p>
                </div>
                <div class="row social-module position-sticky fixed-bottom m-0 w-100 py-2 bg-primary">
                    <div class="col-12 col-md-4">
                        Like
                    </div>
                    <div class="col-12 col-md-4">
                        Cmnt
                    </div>
                    <div class="col-12 col-md-4">
                        Share
                    </div>
                </div>
            </div>
        </div>
        <div class="col-8 remove-lr-padding" id="user-map">
            hello
        </div>
    </div>
</div>

我刚刚将h-100类添加到该行，然后将position-sticky类添加到另一行。

哦，我撕掉了你的边缘。： - ）

固定bootstrap 4列中的位置元素

1 个答案: