2017-10-20 8 views
1

J'utilise bootstrap pour le style de mon administration à l'aide du thème adminlte Je suis en train de faire mes étiquettes gauche à mes zones de texte, mais je suis en utilisant lePositions des étiquettes apparaissant en haut au lieu de gauche

suivant
<div class="col-md-10"> 
     <div class="nav-tabs-custom"> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a href="#activity" data-toggle="tab">Prodct Info</a></li> 
       <li><a href="#images" data-toggle="tab">Product Images</a></li> 
       <li><a href="#seo" data-toggle="tab">Seo</a></li> 
       <li><a href="#settings" data-toggle="tab">Settings</a></li> 
      </ul> 
      <div class="tab-content"> 
       <div class="active tab-pane" id="activity"> 
        <form asp-controller="Products" asp-action="Create" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form"> 

         <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
         <div class="form-group"> 
          <label asp-for="ProductName" class="control-label">Product Name</label> 
          <input asp-for="ProductName" class="form-control" /> 
          <span asp-validation-for="ProductName" class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label asp-for="LongDescription" class="control-label"></label> 


          <textarea id="editor1" name="editor1" rows="10" cols="80"> 
             This is my textarea to be replaced with CKEditor. 
       </textarea> 

         </div> 
         <div class="form-group "> 
          <label asp-for="OldPrice" class="control-label"> Old Price</label> 
          <input asp-for="OldPrice" class="form-control" /> 
          <span asp-validation-for="OldPrice" class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label asp-for="NewPrice" class="control-label">Price</label> 
          <input asp-for="NewPrice" class="form-control" /> 
          <span asp-validation-for="NewPrice" class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label asp-for="SKU" class="control-label">Sku (Product No)</label> 
          <input asp-for="SKU" class="form-control" /> 
          <span asp-validation-for="SKU" class="text-danger"></span> 
         </div> 

       </div> 

Ce qui donne moi une mise en page en tant que telle, mais je veux que les étiquettes des contrôles pour être à gauche avec un rembourrage égal

enter image description here

C'est ce que je suis en train de réaliser ne pas personne comment. enter image description here

Répondre

-1

Utilisez la classe Form-inline avec chaque groupe de formulaires selon Bootstrap's documentation. Un exemple de votre code serait:

<div class="form-group form-inline"> 
 
    <label asp-for="OldPrice" class="control-label"> Old Price</label> 
 
    <input asp-for="OldPrice" class="form-control" /> 
 
    <span asp-validation-for="OldPrice" class="text-danger"></span> 
 
</div>

Edit: J'ai raté la partie où vous vouliez un espacement égal. Dans ce cas, la réponse de Patrick O'Grady devrait fonctionner. Cependant, vous avez fermé votre balise div avant de fermer le formulaire. Voici le code complet que vous avez donné les propres balises et fermetures:

\t \t <div class="col-md-10"> 
 
\t \t \t <div class="nav-tabs-custom"> 
 
\t \t \t \t <ul class="nav nav-tabs"> 
 
\t \t \t \t \t <li class="active"><a href="#activity" data-toggle="tab">Prodct Info</a></li> 
 
\t \t \t \t \t <li><a href="#images" data-toggle="tab">Product Images</a></li> 
 
\t \t \t \t \t <li><a href="#seo" data-toggle="tab">Seo</a></li> 
 
\t \t \t \t \t <li><a href="#settings" data-toggle="tab">Settings</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t <div class="tab-content"> 
 
\t \t \t \t \t <div class="active tab-pane" id="activity"> 
 
\t \t \t \t \t \t <form asp-controller="Products" asp-action="Create" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form"> 
 
\t \t \t \t \t \t \t <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
 
\t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label asp-for="ProductName" class="control-label col-sm-2">Product Name</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <input asp-for="ProductName" class="form-control" /> 
 
\t \t \t \t \t \t \t \t \t <span asp-validation-for="ProductName" class="text-danger"></span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label asp-for="LongDescription" class="control-label col-sm-2"></label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <textarea id="editor1" name="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor.</textarea> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group "> 
 
\t \t \t \t \t \t \t \t <label asp-for="OldPrice" class="control-label col-sm-2"> Old Price</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <input asp-for="OldPrice" class="form-control" /> 
 
\t \t \t \t \t \t \t \t \t <span asp-validation-for="OldPrice" class="text-danger"></span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label asp-for="NewPrice" class="control-label col-sm-2">Price</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <input asp-for="NewPrice" class="form-control" /> 
 
\t \t \t \t \t \t \t \t \t <span asp-validation-for="NewPrice" class="text-danger"></span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t <label asp-for="SKU" class="control-label col-sm-2">Sku (Product No)</label> 
 
\t \t \t \t \t \t \t \t <div class="col-sm-10"> 
 
\t \t \t \t \t \t \t \t \t <input asp-for="SKU" class="form-control" /> 
 
\t \t \t \t \t \t \t \t \t <span asp-validation-for="SKU" class="text-danger"></span> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </form> 
 
\t \t \t \t \t </div>

1

Vous avez la classe form-horizontal ajouté à <form>, mais je pense que vous devez également ajouter des classes de colonne de grille définir les largeurs de chaque étiquette et entrée.

Par exemple, ajoutez la classe col-sm-2-<label>, puis envelopper les input et span l'intérieur

<div class="col-sm-10"> 

</div> 

Utilisation des classes col-sm-* provoquera l'étiquette et l'entrée à la pile si la fenêtre est < 768px. Si vous voulez qu'ils soient toujours horizontaux, utilisez col-xs-*.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<!--Stacked if width < 768px --> 
 
<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <label asp-for="OldPrice" class="col-sm-2 control-label">Old Price</label> 
 
    <div class="col-sm-10"> 
 
     <input asp-for="OldPrice" class="form-control" /> 
 
     <span asp-validation-for="OldPrice" class="text-danger"></span> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<!-- Never stacked --> 
 
<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <label asp-for="OldPrice" class="col-xs-2 control-label">Old Price</label> 
 
    <div class="col-xs-10"> 
 
     <input asp-for="OldPrice" class="form-control" /> 
 
     <span asp-validation-for="OldPrice" class="text-danger"></span> 
 
    </div> 
 
    </div> 
 
</form>

Source: https://getbootstrap.com/docs/3.3/css/#forms-horizontal

+0

boîtes entre eux semblent avoir un autre panneau autour d'eux comment peut-on y parvenir? Lorsque j'exécute l'extrait de code, il n'a pas aligné les contrôles? cela fonctionnera-t-il bien à l'extérieur de la pile? – rogue39nin

+0

ouais je fais toujours 'col-sm- *' donc ça empile sur mobile, car en utilisant 'col-xs- *' l'étiquette ne s'aligne pas tout à fait. Si vous cliquez sur "Full page", vous pouvez le voir mieux. –

+0

_Les boîtes de tems semblent avoir un autre panneau autour d'eux comment y arriver? _ Qu'entendez-vous par là? Quelles boîtes ont un panneau? –