时间戳

首页 > 解决方案 > 无论网格布局如何，都放置一个按钮 bootstrap4

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

问题描述

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

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

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

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

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

在此处输入图像描述

编辑：

对于@Imran Rafiq 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>

标签： htmlcsstwitter-bootstrapbootstrap-4grid-layout

解决方案

在您的内部sidebar创建一个按钮，例如<button>X</button>. 然后使用以下 CSS。

.sidebar{
  position:relative;
}

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

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

作为基本规则：

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

推荐阅读