Wie kann die Breite des Bootstrap-Containers auf die maximale Breite erhöht werden?

Question

Ich habe eine DataTable innerhalb eines Bootstrap div des Typs Container platziert. Wenn ich die Website in der maximalen Breite des Browsers ausführe, fügt der Container für die Tabelle eine Bildlaufleiste hinzu und schneidet die letzte Spalte in der Tabelle ab.

Ich habe versucht, einen container-fluid Div-Typ wie vorgeschlagen here verwenden, aber dies verringert die Breite der Tabellen Container noch weiter.

Auf Inspizieren des Elements es scheint, dass umgebende container body-content vererbte Form der Layoutseite einen Seitenrand auf der linken und rechten Seite des Tisches Behälter ergänzt:

Eine mögliche Lösung Ich denke, wenn die Marge der ererbten container body-content auf maximale Breite zu verringern, aber ich bin mir nicht sicher, wie man das über CSS macht.

Aus dem Screenshot unten Sie, dass das Löschen col abgeschnitten wird sehen können, obwohl es viel Leer Widerrist Seite des Tisches zu erweitern ist:

Frage:

Wie können Sie die Breite eines Bootstrap-Containers auf Max Breite erhöhen?

Wesentlicher Inhalt des Tabellencontainer Markup:

<div class="container"> 


    <div class="form-group"> 
     <div class="table-responsive"> 
      <div class="table-responsive" id="datatable-wrapper"> 

       <table id="escalation" class="table table-striped table-bordered" cellspacing="0"> 
        <thead> 
         <tr> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">ID</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Application</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">UID</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Type</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Status</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Statement</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Created</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Updated</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Last Update</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Next Update</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Root Cause</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Details</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Delete</th> 
         </tr> 
        </thead> 
        <tbody> 
         @foreach (HP.ESCALATION.Web.Models.Escalation item in Model) 
         { 

          <tr> 
           <td>@item.ID</td> 
           <td>@item.Application</td> 
           <td class="td-limit">@item.EM</td> 
           <td class="td-limit">@item.Event</td> 
           <td class="td-limit">@item.status</td> 
           <td class="td-limit">@item.Statement</td> 
           <td class="td-limit">@item.Created</td> 
           <td class="td-limit">@item.Updated</td> 
           <td data-order="@item.UnixTimeStamp" class="td-limit">@item.UpdatedTime</td> 
           <td class="td-limit">@item.NextUpdate</td> 
           <td class="td-limit">@item.RootCause</td> 
           @* Add CRUD buttons to each table row --> *@ 
           <td><button type="submit" style="background-color: #0CA281;" class="btn btn-success details">Details</button></td> 
           <td><button type="submit" class="btn btn-danger delete">Delete</button></td> 
          </tr> 

         } 


        </tbody> 
       </table> 




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

Wesentlicher Inhalt der Layout-Container:

<div class="container body-content" style="margin-top: 90px; margin-bottom: 70px;"> 

       @* Main Content Render *@ 
       <div id="content"> 
        <div class="content-wrapper main-content clear-fix"> 

        </div> 
        @RenderSection("featured", required: false) 
        <section class="content-wrapper main-content clear-fix"> 
         @RenderBody() 
        </section> 
       </div> 


      </div> 

Answer 1

Die Lösung, die in diesem Fall gearbeitet und erlaubte noch die Behälter kleinere Auflösungen, um die Größe auf, war die CSS-Ziel mit @ media:

@media only screen and (min-width : 1200px) { 

    .container { width: 1500px; } 

} 

Answer 2

Um die Breite des Behälters zielt auf den Behälter mit CSS zu erhöhen:

.container{ 
    max-width: 1400px; //Or whatever value you need 
} 

Sie Sie können Medienabfragen verwenden, um anzugeben, welche Haltepunkte dieser Stil ebenfalls anwenden soll.

Answer 3

Eine mögliche Lösung Ich denke, wenn die Grenze des geerbt Behälterkörper-Gehalt auf max Breite zu verringern, aber ich bin nicht sicher, wie man tun, dass über CSS.

Versuchen Hinzufügen Sie folgendes zu Ihrem CSS

.container.body-content{ 
    margin-left:0; 
    margin-right:0; 
    padding-left:0; 
    padding-right:0; 
} 

Ohne eine funktionierende Demo mit diesem auf, es zu testen ist schwierig zu sagen, ob dies gut genug sein wird, oder ob es Verfeinerung brauchen würde.

Viel Glück!

Answer 4

Sie können den Bootstrap-CSS außer Kraft setzen, durch Hinzufügen der CSS für Container als

.container { width: 1400px; } 

make sure this css file is added after the bootstrap css