Comment faire pour augmenter la largeur de Bootstrap conteneur largeur Max?

J'ai placé un DataTable dans un Bootstrap div de type conteneur. Quand je lance le site web sur le navigateur de la largeur maximale du récipient pour la table ajoute une barre de défilement et de couper la dernière colonne de la table.

Je l'ai fait essayer à l'aide d'un container-fluid div type, comme l'a suggéré ici mais cela diminue la largeur des tables du conteneur encore plus loin.

Sur l'inspection de l'élément, il semble que environnants container body-content forme héréditaire de la mise en page est l'ajout d'une marge à gauche et à droite de la table contenant:

Une solution possible, je suis en train de penser si la diminution de la marge de l'héritage container body-content sur largeur max, mais je ne suis pas sûr de la façon de le faire via CSS.

De la capture d'écran ci-dessous, vous pouvez voir que l'Supprimer le col est coupé même si il ya beaucoup d'espaces flétrir côté de la table à se développer:

Question:

Comment pouvez-vous augmenter la largeur du Bootstrap conteneur largeur Max?

Essentiel de table container balisage:

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

Essentiel de conteneur de Présentation:

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

OriginalL'auteur Brian J | 2016-07-20