Question

我正在尝试按照此post在bootstrap 4中创建类似Gridview的控件。一切似乎工作正常，除了搜索栏，分页栏等正在拉伸到页面的边界。我试图修复表宽但工作正常。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"> 

</head>
<body>

    <table id="myTable" align="center" style="width:600px;table-layout:fixed;" class="table table-striped table-bordered">
        <thead>  
          <tr>  
            <th>Fruit ID</th>  
            <th>Fruit Name</th>  
          </tr>  
        </thead>  
        <tbody>  
        <tr>
            <td>1</td>
            <td>apple</td>
        </tr>
        <tr>
            <td>2</td>
            <td>orange</td>
        </tr>
        <tr>
            <td>3</td>
            <td>lemon</td>
        </tr>
        <tr>
            <td>4</td>
            <td>banana</td>
        </tr>
        <tr>
            <td>5</td>
            <td>grapes</td>
        </tr>
        </tbody>  
    </table>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>  

    <script>
    $(document).ready(function(){
        $('#myTable').dataTable();
    });
    </script>
</body>
</html>

Answer 1

为防止他们“伸出”，请将所有内容放入类.container的div中，如下所示：

<div class="container">
  <!-- Content here -->
</div>

这将使一切都干净利落。

另一种选择是将所有内容放入包含类col-auto mx-auto的列中，如下所示：

<div class="container">
    <div class="row">
        <div class="col-auto mx-auto">
        content goes here
        </div>
    </div>
</div>

col-auto会将列缩小为内容的大小，mx-auto会将该列水平居中。

参考：

https://getbootstrap.com/docs/4.0/layout/overview/#containers

在Bootstrap中创建Gridview控件

1 个答案: