web-dev-qa-db-fra.com

Comment augmenter la largeur de Bootstrap container sur Max width?

J'ai placé un DataTable dans un Bootstrap div de type conteneur. Lorsque j'exécute le site Web sur la largeur maximale du navigateur, le conteneur de la table ajoute une barre de défilement et coupe hors de la dernière colonne du tableau.

J'ai essayé d'utiliser un container-fluid div type comme suggéré ici mais cela diminue encore plus la largeur du conteneur des tables.

En inspectant l'élément, il semble que l'entourant container body-content la forme héritée de la page de mise en page ajoute une marge à gauche et à droite du conteneur de table:

enter image description here

Une solution possible, je pense que pour diminuer la marge de l'héritage container body-content sur la largeur maximale, mais je ne sais pas comment le faire via CSS.

De la capture d'écran ci-dessous, vous pouvez voir que le col Supprimer est coupé bien qu'il y ait beaucoup d'espace blanc au bord du tableau à développer:

enter image description here

Question:

Comment pouvez-vous augmenter la largeur d'un conteneur Bootstrap sur la largeur maximale?

Contenu du balisage de conteneur de table:

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

Contenant Gist of Layout:

<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>
htmlcsstwitter-bootstrapcontainerscontentsize
9
Brian J

La solution qui fonctionnait dans ce cas et permettait toujours au conteneur de se redimensionner sur des résolutions plus petites, était de cibler le CSS à l'aide de @media:

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

    .container { width: 1500px; } 

}
7
Brian J

Aucune des réponses ci-dessus n'est une bonne solution. Vous pouvez facilement changer les variables de bootstrap en créant un nouveau _project_variables.scss et l'importer avant bootstrap dans votre fichier scss principal. Par exemple:

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1280px
) !default;
15
Keith Mifsud

Dans Bootstrap 4 utilisez:

@media only screen and (min-width : 1200px) {
    .container { max-width: 1500px; }
}
5
Keith Turkowski

J'avais également besoin du mien pour travailler avec un écran extra large, j'ai donc ajouté ci-dessous.

/* large devices */
@media (min-width: 1200px) {
  .container {
     max-width: 1200px;
   }
}
/* extra large devices */
@media screen and (min-width: 1800px) {
  .container {
    max-width: 1800px;
  }
}
2
il0v3d0g

Vous pouvez remplacer le bootstrap css, en ajoutant le css pour le conteneur comme

.container { width: 1400px; } 

make sure this css file is added after the bootstrap css
1
Manikandan

Pour augmenter la largeur du conteneur, ciblez le conteneur avec css:

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

Vous pouvez utiliser des requêtes multimédias pour spécifier les points d'arrêt auxquels ce style s'appliquera également

1
JT91

Une solution possible, je pense que pour diminuer la marge du contenu du corps du conteneur hérité sur la largeur maximale, mais je ne sais pas comment le faire via CSS.

Essayez d'ajouter ce qui suit à votre CSS

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

Sans avoir une démo de travail pour tester cela, il est difficile de dire si cela sera assez bon ou s'il aurait besoin d'être raffiné.

Bonne chance!

0
David Taiaroa

Selon ceci: " https://developer.mozilla.org/en-US/docs/Web/CSS/max-width " - "none" est disponible et en Bootstrap Je pense que ça marche mieux:

@media only screen and (min-width : 1200px) {
    .container { max-width: none; }
}
0
gene