无论网格布局如何，都放置一个按钮 bootstrap4答案

【问题标题】：Place a button regardless of grid layout bootstrap4无论网格布局如何，都放置一个按钮 bootstrap4
【发布时间】：2020-12-28 23:11:58
【问题描述】：

我正在尝试创建一个带有浮动箭头按钮的侧边栏，该按钮将折叠该栏（有点类似于，例如this codepen code）。

我正在使用 bootstrap4，并使用 container-fluid 和 row 除以 2-8-2（左侧边栏 2 列，主要内容 8 列，右侧边栏另外 2 列）。

我不确定是否需要调整行并替换其中一列以将浮动按钮放入其中，或者我可以以某种方式打破网格布局并将按钮放在第 2 列和第 3 列之间（让我们假设在“列”1.5 和 2.5 或 2 和 2.5 之间拉伸）。

我在网上找不到使用引导程序网格布局的浮动按钮机制，所以我提出了一个新问题。

例如，在下图中红色区域放置一个浮动按钮：

编辑：

应@Imran Rafiq 拉瑟的要求，这是 HTML 代码（如您所见，在一行中分为 3 个部分）。如果需要，我可以简化它，里面的所有内容对问题本身并不重要。

<!--main row (second row) in the grid layout-->
    <div class="container-fluid ml-n3">
        <div class="row" name="main-row">

            <!--sidebar-left-->
            <div class="col-2 position-fixed" style="height: 100vh;" name="sidebar-left">
                
                <ul  class="list-group bg-secondary h-100 collapse show" id="sb-left">
                    <li class="list-group-item bg-secondary border-0">
                        <a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="explore">#Explore</a>
                    </li>
                    <li class="list-group-item bg-secondary border-0">
                        <a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="bookmarks">Bookmarks</a>
                    </li>
                    <li class="list-group-item bg-secondary border-0">
                        <a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="lists">Lists</a>
                    </li>
                    <li class="list-group-item bg-secondary border-0">
                        <a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="moments">Moments</a>
                    </li>
                    <li class="list-group-item bg-secondary border-0">
                        <a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="settings">Settings</a>
                    </li>
                    <li class="list-group-item bg-secondary border-0 d-flex justify-content-center align-items-center">
                        <button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#post-tweet-id">Tweet</button>
                    </li>
                    <li class="list-group-item bg-secondary mt-5">
                        <div class="mt-5"></div>    
                        <div class="row d-flex">    
                            <div class="col-auto">
                                <img src="logo.png" class="rounded-circle img-fluid" style="height: 40px" alt="Profile Picture" />
                            </div>
                            <div class="col">
                            <div>user-name</div>
                            <div class="text-white"><small>@username</small></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <!--main-content-->
            <div class="col-8 offset-2 container-fluid" name="main-content">
                <div class="card mx-3 my-5"> <!--mb-5 mt-3-->
                    <div class="row no-gutters bg-dark text-white-50">
                        <div class="col-auto">
                            <img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
                        </div>
                        <div class="col">
                            <div class="card-block px-2">
                                <div class="card-header"><a href="#" class="link text-decoration-none">@Username</a></div>
                                <div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
                                <div class="card-footer">
                                    <span class="btn-toolbar btn-group-sm px-5">
                                        <button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="modal" data-target="#post-comment"><i class="far fa-comment-alt"></i></button>
                                        <button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="modal" data-target="#tweet-id"><span data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></span></button>
                                        <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
                                        <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
                                        <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>           
                </div>
            </div>

            <!--sidebar-right-->
            <div class="col-2 position-fixed offset-10 overflow-auto" style="height: 89vh;" name="sidebar-right">
                <ul class="list-group bg-secondary h-100" name="sb-right">
                    <button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
                        <div><small>name-of-trend</small><div>
                        <div><h4>#Explore</h4></div>
                        <div><small>num-of-tweets</small></div>
                    </button>
                    <button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
                        <div><small>name-of-trend</small><div>
                        <div><h4>#Explore</h4></div>
                        <div><small>num-of-tweets</small></div>
                    </button>
                    <button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
                        <div><small>name-of-trend</small><div>
                        <div><h4>#Explore</h4></div>
                        <div><small>num-of-tweets</small></div>
                    </button>
                    <button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
                        <div><small>name-of-trend</small><div>
                        <div><h4>#Explore</h4></div>
                        <div><small>num-of-tweets</small></div>
                    </button>
                    <button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
                        <div><small>name-of-trend</small><div>
                        <div><h4>#Explore</h4></div>
                        <div><small>num-of-tweets</small></div>
                    </button>
                    <button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
                        <div><small>name-of-trend</small><div>
                        <div><h4>#Explore</h4></div>
                        <div><small>num-of-tweets</small></div>
                    </button>
                    <button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
                        <div><small>name-of-trend</small><div>
                        <div><h4>#Explore</h4></div>
                        <div><small>num-of-tweets</small></div>
                    </button>
                    <button type="button" href="#" class="list-group-item list-group-item-action bg-info text-white mx-auto">
                        <div><h6>Show more...</h6></div>
                    </button>
                    
                </ul>      
            </div>
        </div>
    </div>
</div>

【问题讨论】：

在此处分享您的代码。我会为你做的:)

标签： html css twitter-bootstrap bootstrap-4 grid-layout

【解决方案1】：

在您的sidebar 中创建一个类似<button>X</button> 的按钮。然后使用以下 CSS。

.sidebar{
  position:relative;
}

button{
  position:absolute;
  top:45%;
  right:-1rem;
}

注意： button 应该是 aside 的直接子代。这样按钮就会脱离正常流程，我们可以将其放置在aside 内的任何位置。

作为一般规则：

每当我们有position:relative 的父母时。我们可以用 position:absolute 在其子元素上并将其放置在其中的任何位置父 :) 超出正常执行流程！！！

【讨论】：

不错！我想知道为什么这有效。我尝试操纵按钮的位置，但它总是将我限制在它所在的列内。是因为“位置：绝对”吗？
@Yechiam Weiss：是的
每当我们有一个父级的位置：相对。我们可以在它的任何子节点上使用 position:absolute 并将其放置在父节点中的任何位置:)
世界上存在一些不太好的人......我有时真的不明白......为什么编码人员会这样:)无论如何:)希望你的问题得到解决......跨度>
是的，它们的工作方式相同。让我指导你一点。您将需要设置一个 transform:translate() 来平滑关闭侧边栏。设置一个转换：所有 0.5s 缓动；在旁边。当按钮被点击时，它会顺利移动。您也可以尝试一些动画关键帧。这些是我的提示。是的，根据 javascript 中的变量更改按钮内容！！！祝你好运。