时间戳

首页 > 解决方案 > 在 HTML 和 CSS 中使用不同的布局

css - 在 HTML 和 CSS 中使用不同的布局

问题描述

所以这就是我想要做的，但我真的不擅长 html 和 css，问题是我对如何完成图片中显示的内容有疑问，并且还想知道如何在 div 中使用不同的布局或我如何组织图像中的那些控件，我曾经在 android 中使用布局，所以也许这就是为什么我觉得它有点令人困惑，任何帮助表示赞赏。

布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

    <style>

        form{
            display: inline-block;
        }

        .botones{
            padding: 10px 10px;
            vertical-align: middle;
            /**margin-left: 30px;**/
        }

        #botonNuevo{
            margin-top: 5px;
            margin-bottom: 5px;
        }

    </style>

    <script>

        $(document).ready(function () {
            $('TablePersonal').DataTable();
        })

        $(TablaPersonal).DataTable

    </script>

</head>
<body>

<div class="container">

    <div class="row">

    <div>

        <form>
            <table id="TablaPersonal" class="table table-striped table-bordered" style="width:100%">
                <thead>
                <tr>
                    <th>No. Expediente</th>
                    <th>No. Empleado</th>
                    <th>Nombre</th>
                    <th>RFC</th>
                    <th>Teléfono</th>
                    <th>Puesto</th>
                    <th>Lugar de Asignación</th>
                    <th>Estatus</th>
                </tr>
                </thead>

                <tbody>
                <tr>
                    <td class="marker">1</td>
                    <td>1</td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>

    <div class=" btn-group botones">
        <button id="botonNuevo" type="button" class="btn btn-primary btn-block">Nuevo</button><br>
        <button type="button" class="btn btn-primary btn-block">Inactivar</button><br>
        <button type="button" class="btn btn-primary disabled btn-block">Modificar</button><br>
        <button type="button" class="btn btn-primary disabled btn-block">Exportar</button><br>
        <button type="button" class="btn btn-primary disabled btn-block">Eliminar</button><br>
    </div>

</div>

</div>

</body>
</html>

标签： csshtmltwitter-bootstrapbootstrap-4

解决方案

您可以使用此处所示的 Bootsrap 网格系统，将您的表格和按钮排成一行<div class="row">，并使用 包裹您的表格<div class="col-sm-8>"并使用 包裹您的按钮<div class="col-sm-4>"，并调整您的按钮宽度。多阅读他们的网格系统的引导文档，啊我也删除了你的#bottonNuevo样式，或者你也可以自己调整它。对于搜索按钮和表单，也只需使用引导网格系统即可

推荐阅读