Bootstrap 3-Implementierung verursacht große Rechtsverschiebung aller Elemente

Ich benutze AJAX, um Daten in einer DataTable zu füllen, die alle richtig funktioniert. Allerdings muss ich ein Boostrap Modal Popup haben, wenn ich auf das erste Element klicke.Bootstrap 3-Implementierung verursacht große Rechtsverschiebung aller Elemente

Die Auslösung funktionierte alles richtig, aber es erschien nicht über meine Datentabelle. Ich erkannte, dass ich auf Bootstrap 3.3.7 aktualisieren musste, um das Problem zu beheben. Welche funktionierte das Modal jetzt richtig?

Aber jetzt sind alle meine Elemente richtig verschoben worden und ich habe keine Ahnung, wie ich das beheben kann. Ich habe versucht, Ränder und Padding dauerhaft auf 0 zu setzen, aber das hat sich nicht geändert. In Chrome Dev Tools kann ich kein Element identifizieren, das den Abstand verursacht.

Ich löschte alle meine Elemente und alle meine persönlichen CSS und es wird immer noch in die Mitte nach rechts verschoben.

Siehe hier: http://imgur.com/a/ZIkkS

Unter dem Script SRC ist und die Stylesheets Ich verwende:

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

Und hier ist mein Körper 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;

}

Hier ist meine Ansicht (ohne 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>

Quelle

2016-12-13 Anthony Drury

Versuchen Sie den Code in

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

und sehen zu sperren, wenn es richtig funktioniert

Quelle

2016-12-14 03:20:54 osk2

Bootstrap 3-Implementierung verursacht große Rechtsverschiebung aller Elemente

Antwort

Verwandte Themen