Question

这就是我想做的事情，但是我真的对html和css不好，问题是我对如何完成图片中显示的内容有疑问，并且还想知道如何在其中使用不同的布局div或如何组织图像中的控件，我曾经在android中使用布局，所以perhabs就是为什么我觉得它有点令人困惑，不胜感激。

layout

<!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>

Answer 1

您可以使用Here中所示的Bootsrap Grid System，将表和按钮包装在行<div class="row">中，并用<div class="col-sm-8>"包装表，并用{{1 }}，然后调整您的按钮宽度。只需阅读有关其网格系统的更多引导文档，我也将删除您的<div class="col-sm-4>"样式，或者您也可以自行调整它。对于搜索按钮和表单，也只需使用引导网格系统

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

1 个答案: