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

Time:02-02

i want to apply text end or push the buttom to end in pc view and make each buttons take whole width and stack upon each other in mobile view for two href buttons inside ! any idea??

    <div >
        <div >
             <label >@wordInfo["Title"]</label>
         </div>
        <div > 
         
            <a href="@(ViewData["ROOT_URL"])menu/menuform/@Common.CommonConst.Mode.PUB_C_REGIST/" 
            >
<span  data- 
            fa-transform="shrink-3"></span> @wordInfo["Regist"]</a>
     
           <a href="@(ViewData["ROOT_URL"])menu/menusublist/" ><span  data-fa-transform="shrink-3"></span> 
          @wordInfo["MenuSubList"]</a>
            </div>

pc view ok

enter image description here

should looks like this in mobile view enter image description here

CodePudding user response:

Add this class mobile to label(Menu list) & a tag(Sub,Reg).

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

This will make them vertical when screen-width<=800px, change the vaue if you need to.

  •  Tags:  
  • Related