2
votes

Comment afficher le résultat sur la même ligne

Comment dois-je faire si je veux que ces ProductName soient sur la même ligne. Je veux dire sans nouvelle ligne pour chaque produit.

De cette façon, je leur donne chaque nom dans une nouvelle ligne, mais je les veux dans la même ligne.

<div class="col-md-12">

    @foreach (var item in Model)
    {
    <div class="col-md-1">
        @Html.ActionLink(item.ProductName, "PrName", "Products", new { Id = item.ProductId }, null)
    </div>
    }
</div>

c# twitter-bootstrap asp.net-mvc view styling

6 commentaires

Vous pouvez ajouter un style à votre classe col-md-1 comme display: inline-block; .

C'est une question de style plus qu'une c #, je suggère de regarder les classes bootstrap, car je peux voir que vous l'utilisez déjà avec col-md- * ou en ajoutant un style css à votre page.

actuellement avec le col-md-1 en fonction de la taille de l'écran, mais au plus, seuls 12 produits seront affichés sur une seule ligne. En ajoutant à @ itsme86, vous aurez peut-être besoin d'un css personnalisé pour accomplir ce que vous essayez de faire.

@ itsme86 merci ça marche, mais ils sont si serrés les uns avec les autres, comment puis-je faire de l'espace entre eux? J'ai changé pour col-md-2 mais le même résultat.

@JonasWillander ajoute également un remplissage à votre div .

Essayez de remplacer

par

. Cela donnera un espacement entre les cols. Ou vous pouvez utiliser class = "row" pour plus d'espace.

3 Réponses :

-1
votes

Je ne suis pas sûr, mais puisque l'élément div est utilisé, cela signifie que vos éléments seront un élément bloc. Au lieu de div, essayez d'utiliser span. J'espère que cela aide.

0 commentaires

1
votes

Le problème avec votre code est que vous utilisez la balise à l'intérieur de votre boucle for, qui vous divise autant de fois que la boucle for. Retirez donc votre balise à l'intérieur de la boucle for. Votre code doit ressembler à ceci:

<div class="col-md-12">

    @foreach (var item in Model)
    {
        @Html.ActionLink(item.ProductName, "PrName", "Products", new { Id = item.ProductId }, null)
    }
</div>

0 commentaires

2
votes

Supprimez la balise div dans votre boucle for.

  @foreach (var item in Model)
        {
            @Html.ActionLink(item.ProductName, "PrName", "Products", new { Id = item.ProductId }, null)
        }

Cela fonctionne.

0 commentaires