龙空技术网

bootstrap4简单后台界面右侧页面

阿亮坚持 548

前言:

如今我们对“css div居右”大约比较注重,咱们都想要学习一些“css div居右”的相关资讯。那么小编在网上网罗了一些有关“css div居右””的相关资讯,希望看官们能喜欢,我们快快来了解一下吧!

(1),代码片段

<!DOCTYPE html><html lang="zh-Hant-TW">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!-- Bootstrap CSS -->    <link rel="stylesheet" href="css/bootstrap.min.css">    <!-- fontawesome CSS -->    <link rel="stylesheet" href="css/font-awesome.min.css">    <!-- 自訂義 CSS -->    <link rel="stylesheet" href="css/style.css">    <link rel="stylesheet" href="css/products-list.css">  </head>  <body>    <div class="rightTop">      <div class="card">        <div class="card-header">          用户管理列表        </div>          <form>        <div class="card-body">            <div class="row">                <div class="col-6">                    <div class="row">                        <div class="col-4 text-right" style="padding-top: 6px; padding-right: 0px;">                            <label for="" class="lableFormJ">用户名:</label>                        </div>                        <div class="col-8">                            <input type="text" class="form-control" id="" placeholder="">                        </div>                    </div>                </div>                <div class="col-6">                    <div class="row">                        <div class="col-4 text-right" style="padding-top: 6px; padding-right: 0px;">                            <label for="" class="lableFormJ">中文名称:</label>                        </div>                        <div class="col-8">                            <input type="text" class="form-control" id="" placeholder="">                        </div>                    </div>                </div>            </div>            <div class="row" style="margin-top: 13px;">                <div class="col-6">                    <div class="row">                        <div class="col-4 text-right" style="padding-top: 6px; padding-right: 0px;">                            <label for="" class="lableFormJ">爱好:</label>                        </div>                        <div class="col-8">                            <input type="text" class="form-control" id="" placeholder="">                        </div>                    </div>                </div>                <div class="col-6">                    <div class="row">                        <div class="col-4 text-right" style="padding-top: 6px; padding-right: 0px;">                            <label for="" class="lableFormJ">特长:</label>                        </div>                        <div class="col-8">                            <input type="text" class="form-control" id="pwd" placeholder="">                        </div>                    </div>                </div>            </div>            <div class="row" style="margin-top: 13px;">                <div class="col-6">                    <div class="row">                        <div class="col-4 text-right" style="padding-top: 6px; padding-right: 0px;">                                                     </div>                        <div class="col-8">                            <button type="button" class="btn btn-primary">查询</button>                                                         <button type="button" class="btn btn-secondary">重置</button>                        </div>                    </div>                </div>                <div class="col-6">                    <div class="row">                        <div class="col-4 text-right" style="padding-top: 6px; padding-right: 0px;">                                                     </div>                        <div class="col-8">                                                     </div>                    </div>                </div>            </div>        </div>          </form>      </div>    </div>    <div class="rightBody">        <div class="table-responsive">            <table class="table table-lg table-hover">                <thead>                <tr>                    <th>Firstname</th>                    <th>Lastname</th>                    <th>Email</th>                </tr>                </thead>                <tbody>                <tr>                    <td>John</td>                    <td>Doe</td>                    <td>john@example.com</td>                </tr>                <tr>                    <td>Mary</td>                    <td>Moe</td>                    <td>mary@example.com</td>                </tr>                <tr>                    <td>July</td>                    <td>Dooley</td>                    <td>july@example.com</td>                </tr>                </tbody>            </table>        </div>        <div class="rightBodyBottom">            <div class="container">                <ul class="pagination justify-content-center">                    <li class="page-item"><a class="page-link" href="#">上一页</a></li>                    <li class="page-item"><a class="page-link" href="#">1</a></li>                    <li class="page-item"><a class="page-link" href="#">2</a></li>                    <li class="page-item"><a class="page-link" href="#">3</a></li>                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>                </ul>            </div>        </div>    </div>  </body></html>

(2),资源文件

链接:

提取码:llpg

标签: #css div居右