Je fais une application web ASP.NET MVC5. Le modèle par défaut utilise bootstrap, ce qui convient à presque toutes les pages. Cependant, j'ai besoin d'une page pour avoir width: 100%. La vue que je voudrais utiliser est une vue partielle, elle sera donc rendue dans le .container (voir le code ci-dessous), ainsi que les autres vues partielles.100% de largeur pour seulement 1 page, laissez le reste comme fluide

<div class="container"> 
    @RenderBody() 
    <hr /> 
    <footer> 
     <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
    </footer> 
</div>

Tous sont beaux à être fluides, mais j'ai besoin que celui-ci ait une largeur de 100%. Quelle est une façon élégante de le faire?

2013-08-24 Adam Szabo

Est-ce que toutes les autres pages partagent cette même .container div? – cantera

Oui. Toutes les pages sont rendues à la place de @RenderBody(). Le widht de .container est maintenu dynamiquement par bootstrap, basé sur la taille de la fenêtre en cours. –

http://stackoverflow.com/questions/15204976/bootstrap-100-width-full-width Vérifiez ce post ... –

Dans votre vue partielle, vous pouvez utiliser jQuery pour modifier le CSS du conteneur div. Cela changerait la largeur chaque fois que cette vue est rendue, mais n'aurait aucun effet sur les autres pages.

EDIT: Comme l'OP l'a fait remarquer, Bootstrap JS réinitialisera la largeur lors du redimensionnement de la fenêtre. Nous devons donc faire la même chose:

$(document).ready(function(){ 
    setWidthOfContainer(); 
    $(window).resize(setWidthOfContainer); 
}); 

function setWidthOfContainer(){ 
    console.log("Setting width of container to 100%."); 
    $('div.container').css('width','100%'); 
}

Voir le violon ici: http://jsfiddle.net/GqRd7/

Source

2013-08-25 00:43:48 htxryan

Merci, mais pas bon, car sur le redimensionnement de la fenêtre, bootstrap s'occuperait de '.container' et le redimensionnerait à nouveau. –

Bon point. Réponse mise à jour – htxryan

Merci pour la mise à jour. Je ne veux pas aller de cette façon «lutter contre le bootstrap par programme». –

j'ai réussi à le résoudre en faisant la position du contenu rendu absolute et left: 0, mais <footer> est caché derrière elle, donc Je dois prendre soin de celui-ci séparément (ou l'enlever complètement). Pas la solution élégante que je souhaitais, mais fonctionne.

Source

2013-08-25 08:19:21

J'ai eu un problème similaire, où le conteneur a été utilisé dans la mise en page et très bien pour la plupart des pages, mais je voulais un élément de pleine largeur impair dans ce conteneur.

A partir de Bootstrap 3, vous pouvez utiliser la classe .container-fluid pour un contenu de 100% de largeur. Cependant, l'utilisation de ceci dans .container ne fait rien, car elle est limitée par la largeur .container. Voici quelques options/solutions de contournement que j'ai rencontré:

Utilisez sections

Si la teneur en largeur de 100% est toujours utilisé au début ou à la fin du contenu du conteneur, vous pouvez définir des sections dans la page de mise en page et insérez l'élément 100% width dedans.

Mise en page:

<div class="container-fluid"> 
    @RenderSection("containerFluid", required: false) 
</div> 

<div class="container"> 
    @RenderBody() 
</div>

Vue:

@section containerFluid 
{ 
    <div>Full width content.</div> 
} 

<div>Other content</div>

Dans votre cas, si vous aviez pas d'autre contenu sur cette une page, vous pouvez simplement mettre la page entière dans le section.

Utilisez une autre page de mise en page

Si c'est une page entière qui doit être pleine largeur, vous pouvez simplement obtenir d'utiliser une autre mise en page. Utilisez les partiels pour le code commun et remplacez l'élément .container par .container-fluid.

mise en page normale:

<!DOCTYPE html> 
<html lang="en"> 
@Html.Partial("_LayoutHead") 
<body> 
    @Html.Partial("_Navbar") 

    <div class="container"> 
     @RenderBody() 
    </div> 

    @Html.Partial("Footer") 
</body> 
</html>

mise en page alternative

<!DOCTYPE html> 
<html lang="en"> 
@Html.Partial("_LayoutHead") 
<body> 
    @Html.Partial("_Navbar") 

    <div class="container-fluid"> 
     @RenderBody() 
    </div> 

    @Html.Partial("Footer") 
</body> 
</html>

fermer manuellement le conteneur et rouvrez plus tard

Je ne recommanderais pas vraiment celui-ci, car il est très hacky, et montrera des erreurs, mais il compile et fonctionne. Cela peut être utilisé si vous avez un élément quelque part au milieu du contenu que vous voulez être en pleine largeur pour une raison quelconque.

Vue:

<div>Some normal content here.</div> 

</div> <!--This shows an error for missing a starting tag. The actual starting tag is on the layout page.--> 

<div class="container-fluid"> 
    <div>Full width div</div> 
</div> 

<div class="container"> <!--This shows an error for missing an ending tag. It actually gets closed using the end tag in the layout page--> 
    <div>Back to normal</div>

Source

2017-03-01 17:16:54

100% de largeur pour seulement 1 page, laissez le reste comme fluide

Répondre

Utilisez sections

Utilisez une autre page de mise en page

fermer manuellement le conteneur et rouvrez plus tard

Questions connexes