bootstrap左右圓角按鈕-適配手機頁面

來源:互聯網
上載者:User

標籤:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 5     <meta charset="utf-8" /> 6     <title></title> 7     <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 8 </head> 9 <body>10 <style>11     .kch_wx_btn_left{12         background-color: orange;13         border-top-left-radius:1em;14         border-bottom-left-radius:1em;15     }16     .kch_wx_btn_left a{17         color: #fff;18         text-decoration: none;19         line-height: 2em;20         padding: 1em;21     }22     .kch_wx_btn_right{23         background-color: #c1e2b3;24         border-top-right-radius:1em;25         border-bottom-right-radius:1em;26     }27 28     .kch_wx_btn_right a{29         color: black;30         text-decoration: none;31         line-height: 2em;32         padding: 1em;33     }34 </style>35 36 <div class="container">37     <div class="row text-center">38         <div class="col-sm-5 col-xs-5 col-xs-offset-1 col-sm-offset-1 kch_wx_btn_left">39             <a href="#" id="kch_wx_left_btnId">我的左邊</a>40         </div>41         <div class="col-sm-5 col-xs-5 kch_wx_btn_right">42             <a href="#" id="kch_wx_right_btnId">我的右邊</a>43         </div>44     </div>45 </div>46 47 </body>48 </html>

 


 

bootstrap左右圓角按鈕-適配手機頁面

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.