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

【问题标题】：Bootstrap 3 implementation causing large right shift of all elementsBootstrap 3 实现导致所有元素的大右移
【发布时间】：2017-04-29 02:57:55
【问题描述】：

我正在使用 AJAX 将数据填充到正常工作的 DataTable 中。但是，当我单击第一个元素时，我需要有一个 Boostrap 模态弹出窗口。

触发一切正常，但它没有在我的数据表中弹出。我意识到我需要升级到 Bootstrap 3.3.7 来解决这个问题。哪个有效，Modal 现在可以正常工作了。

但是现在我的所有元素都向右移动了，我不知道如何修复它。我已经尝试将边距和填充永久设置为 0，但这并没有改变。在 Chrome 开发工具中，我无法识别导致间距的任何元素。

我删除了我所有的元素和我所有的个人 CSS，但它仍然被移到了右边。

请看这里： http://imgur.com/a/ZIkkS

下面是脚本 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>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

尝试将您的代码放入

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

看看它是否正常工作

【讨论】：