无论网格布局如何放置一个按钮 bootstrap4

Question

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

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

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

我无法在网上找到使用 bootstrap 网格布局的浮动按钮机制，所以我提出了一个新问题。

比如下图红色区域放一个悬浮按钮：

编辑：

应@Imran Rafiq Rather 的要求，这是 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>

Answer 1

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

.sidebar{
  position:relative;
}

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

注意： button 应该是 aside 的直系子代。这样按钮就脱离了正常流程，我们可以将其放置在 aside.

内的任何位置

一般规则：

Whenever we have a parent with position:relative. We can use position:absolute on its child element and place it anywhere within the parent :) Out of the normal flow of execution !!!

无论网格布局如何放置一个按钮 bootstrap4

Place a button regardless of grid layout bootstrap4

html

css

twitter-bootstrap

bootstrap-4

grid-layout