如何使按钮在移动视图中扩展到全宽而不使用 bootstrap 结束 pc？

Question

我想在 pc 视图中应用文本结束或按下按钮结束，并使每个按钮占据整个宽度并在移动视图中相互堆叠，以便内部有两个 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>

PC 视图正常

enter image description here

在移动视图中应该是这样的 enter image description here

Answer 1

将此 class mobile 添加到标签（菜单列表）和标签（Sub，Reg）。

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

当 screen-width<=800px 时，这将使它们垂直，如果需要，请更改值。

如何使按钮在移动视图中扩展到全宽而不使用 bootstrap 结束 pc？

how to make buttons extend to full width in mobile view while not end pc using bootstrap?

html

css

twitter-bootstrap