Question

我正在使用AJAX来填充DataTable中的数据，这些数据都正常工作。但是当我点击第一个元素时，我需要有一个Boostrap Modal弹出窗口。

触发操作正常，但是没有弹出我的数据表。我意识到我需要升级到Bootstrap 3.3.7来解决这个问题。现在，Modal的工作正常。

然而现在我的所有元素都被右移，我不知道如何解决它。我尝试将边距和填充永久设置为0，但这没有任何变化。在Chrome开发工具中，我无法识别导致间距的任何元素。

我删除了所有元素和所有个人CSS，但它仍然被转移到右侧中心。

下面是脚本SRC和我正在使用的样式表：

<link rel="stylesheet" href="~/Content/bootstrap.css">
<script src="~/scripts/jquery-1.10.2.js"></script>


<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.3/js/dataTables.buttons.min.js"> </script>
<script src="//cdn.datatables.net/buttons/1.2.3/js/buttons.flash.min.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"> </script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"> </script>
<script src="//cdn.datatables.net/buttons/1.2.3/js/buttons.html5.min.js"> </script>
<script src="//cdn.datatables.net/buttons/1.2.3/js/buttons.print.min.js"> </script>


<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100&amp;lang=en">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.3/css/buttons.dataTables.min.css">

<link rel="stylesheet" href="~/Content/Site.css">

这是我的身体CSS：

body {
background-color: #FFFFFF;
font-family: "Roboto", helvetica, arial, sans-serif;
font-size: 14px;
font-weight: 400;
text-rendering: optimizeLegibility;
padding: 0 !important;
margin: 0 !important;

}

这是我的视图（没有Jscript）：

<body>
<div class="filter">
    <form class="my-form" method="post">
        <br />
        @Html.DropDownList("list", "Select Company")
        <br />
        <br />
        <button input type="submit"> Submit </button>
        <br /><br />
    </form>
</div>

<div id="ck-button">
    <label>
        <input type="checkbox" id="active"><span>Active</span>
    </label>
    <label>
        <input type="checkbox" id="inactive"><span>InActive</span>
    </label>
</div>



<div class="scrollingTable">
    <table class="table-fill" id="myTable">
        <thead>
            <tr>
                <th>Stock Id</th>
                <th>Product Group</th>
                <th>Group Type</th>
                <th>Item Type</th>
                <th>Model</th>
                <th>Serial No</th>
                <th>NR</th>
                <th>Status</th>
                <th>Description</th>
                <th>State</th>
                <th>Date Arrived</th>
                <th>Current Location</th>
                <th>Terminal ID</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th class="foot1">Id</th>
                <th class="foot">Product</th>
                <th class="foot">Group</th>
                <th class="foot">Item</th>
                <th class="foot">Model</th>
                <th class="foot">Serial</th>
                <th class="foot">NR</th>
                <th class="foot">Status</th>
                <th class="foot">Descr</th>
                <th class="foot">State</th>
                <th class="foot">Date</th>
                <th class="foot">Location</th>
                <th class="foot3">T-ID</th>
            </tr>
        </tfoot>


    </table>

</div>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
</body>

Answer 1

尝试将代码放入

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        // code here
      </div>
    </div>
  </div>
</body>

并查看它是否正常工作

Bootstrap 3实现导致所有元素的大右移

1 个答案: