html - 如何使用 Bootstrap 使按钮在移动 View 中延伸到全宽而不是结束电脑?

标签 html css twitter-bootstrap

我想在电脑 View 中应用文本结束或将按钮推到结束,并使每个按钮占据整个宽度并在移动 View 中相互堆叠,以在里面有两个 href 按钮!有什么想法吗??

    <div class="row flex-between-end ps-0 pe-0">
        <div class="col-md-5">
             <label class="col-form-label text-facebook">@wordInfo["Title"]</label>
         </div>
        <div class="col-md-7 ps-sm-0"> 
         
            <a href="@(ViewData["ROOT_URL"])menu/menuform/@Common.CommonConst.Mode.PUB_C_REGIST/" 
            class="btn btn-outline-primary mb-2  ms-1 float-md-end ">
<span class="fas fa-plus " data- 
            fa-transform="shrink-3"></span> @wordInfo["Regist"]</a>
     
           <a href="@(ViewData["ROOT_URL"])menu/menusublist/" class="btn btn-outline-primary mb-2 
          float-md-end"><span class="fa fa-bars" data-fa-transform="shrink-3"></span> 
          @wordInfo["MenuSubList"]</a>
            </div>

电脑查看正常

enter image description here

在移动 View 中应如下所示 enter image description here

最佳答案

将此类移动添加到标签(菜单列表)和标签(Sub、Reg)。

@media (max-width: 800px) {
.mobile {
display: flex;
flex-direction: column;
align-items: center;
}
}

这将使它们在屏幕宽度<=800px时垂直,如果需要,请更改值。

关于html - 如何使用 Bootstrap 使按钮在移动 View 中延伸到全宽而不是结束电脑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70950363/

相关文章:

javascript - 文本覆盖模态 X 按钮

javascript - 如何使用 JavaScript 选择 css 文件?

html - CSS 填充不适用于父 div

html - 有没有办法在 razor foreach 循环中水平显示 Bootstrap 卡?

javascript - 根据div的颜色改变鼠标的颜色

html - 制作带边框的登录表单和模糊的背景

html - 使一个 Div 出现在屏幕的一半之外

html - 屏幕动画内的 CSS "bouncing"行

jquery - .fadeOut() 方法使用可见性属性而不是显示属性

javascript - IE 9 getAttribute 方法工作