Rembourrage manquant sur les rangées Bootstrap

Est-ce que quelqu'un pourrait me dire ce qui ne va pas?Rembourrage manquant sur les rangées Bootstrap

.container { 
 
    margin-top: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="panel panel-primary"> 
 
    <div id="panel-head" class="panel-heading"> 
 

 
    Edit Widget 
 

 
    </div> 
 
    <div class="panel-body"> 
 
    <div class="row"><label for="title" class="col-sm-1 control-label">Title</label> 
 
     <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div> 
 
     <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label> 
 
     <div class="col-sm-5"><select id="widget_type_id" class="form-control"> 
 
       <option disabled="disabled" value="">Please select one</option> 
 
       <option value="1"> 
 
        2D column 
 
       </option> 
 
       <option value="2"> 
 
        Multi-series 2D column 
 
       </option> 
 
       <option value="3"> 
 
        Multi-series 3D column and line 
 
       </option> 
 
       <option value="4"> 
 
        Gauge 
 
       </option> 
 
       <option value="5"> 
 
        Datatable 
 
       </option> 
 
       <option value="6"> 
 
        Counter 
 
       </option> 
 
      </select></div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <label for="link" class="col-sm-1 control-label">Link</label> 
 
     <div class="col-sm-5"> 
 
     <input type="text" id="link" class="form-control"> 
 
     </div> 
 
     <label for="font_size" class="col-sm-1 control-label">Font Size</label> 
 
     <div class="col-sm-2"> 
 
     <input type="text" id="font_size" class="form-control"> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <label for="caption" class="col-sm-2 control-label">caption</label> 
 
     <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <label for="subcaption" class="col-sm-2 control-label">subcaption</label> 
 
     <div class="col-sm-4"> 
 
     <input type="text" id="subcaption" class="form-control"> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label> 
 
     <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div> 
 
    </div> 
 
    </div> 
 
</div>

Il n'y a pas de rembourrage entre les caption, subcaption et yaxisname champs.

Source

2017-10-11 Mick

utiliser la classe 'form-group' pour le remplissage – Vishnu

Donner form-group au lieu de row et ajouter <form class="form-horizontal editform">.

.container { 
 
    margin-top: 10px; 
 
} 
 
.editform.form-horizontal .control-label { 
 
    text-align: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="panel panel-primary"> 
 
    <div id="panel-head" class="panel-heading"> 
 

 
    Edit Widget 
 

 
    </div> 
 
    <div class="panel-body"> 
 
    <form class="form-horizontal editform"> 
 
    <div class="form-group"><label for="title" class="col-sm-1 control-label">Title</label> 
 
     <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div> 
 
     <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label> 
 
     <div class="col-sm-5"><select id="widget_type_id" class="form-control"> 
 
       <option disabled="disabled" value="">Please select one</option> 
 
       <option value="1"> 
 
        2D column 
 
       </option> 
 
       <option value="2"> 
 
        Multi-series 2D column 
 
       </option> 
 
       <option value="3"> 
 
        Multi-series 3D column and line 
 
       </option> 
 
       <option value="4"> 
 
        Gauge 
 
       </option> 
 
       <option value="5"> 
 
        Datatable 
 
       </option> 
 
       <option value="6"> 
 
        Counter 
 
       </option> 
 
      </select></div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label for="link" class="col-sm-1 control-label">Link</label> 
 
     <div class="col-sm-5"> 
 
     <input type="text" id="link" class="form-control"> 
 
     </div> 
 
     <label for="font_size" class="col-sm-1 control-label">Font Size</label> 
 
     <div class="col-sm-2"> 
 
     <input type="text" id="font_size" class="form-control"> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label for="caption" class="col-sm-2 control-label">caption</label> 
 
     <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label for="subcaption" class="col-sm-2 control-label">subcaption</label> 
 
     <div class="col-sm-4"> 
 
     <input type="text" id="subcaption" class="form-control"> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label> 
 
     <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div> 
 
    </div> 
 
    </form> 
 
    </div> 
 
</div>

Source

2017-10-11 09:23:00

Voir ceci:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.container { 
 
    margin-top: 10px; 
 
} 
 
.form-group { 
 
    margin-bottom: 10px; 
 
    display: inline-block; 
 
    width: 100%; 
 
}

<div class="panel panel-primary"> 
 
    <div id="panel-head" class="panel-heading"> 
 

 
     Edit Widget 
 

 
    </div> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="form-group"> 
 
     <label for="title" class="col-sm-1 control-label">Title</label> 
 
      <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div> 
 
      <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label> 
 
      <div class="col-sm-5"><select id="widget_type_id" class="form-control"> 
 
       <option disabled="disabled" value="">Please select one</option> 
 
       <option value="1"> 
 
        2D column 
 
       </option> 
 
       <option value="2"> 
 
        Multi-series 2D column 
 
       </option> 
 
       <option value="3"> 
 
        Multi-series 3D column and line 
 
       </option> 
 
       <option value="4"> 
 
        Gauge 
 
       </option> 
 
       <option value="5"> 
 
        Datatable 
 
       </option> 
 
       <option value="6"> 
 
        Counter 
 
       </option> 
 
      </select></div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="row"> 
 
     <div class="form-group"> 
 
      <label for="link" class="col-sm-1 control-label">Link</label> 
 
      <div class="col-sm-5"> 
 
      <input type="text" id="link" class="form-control"> 
 
      </div> 
 
      <label for="font_size" class="col-sm-1 control-label">Font Size</label> 
 
      <div class="col-sm-2"> 
 
       <input type="text" id="font_size" class="form-control"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="row"> 
 
     <div class="form-group"> 
 
      <label for="caption" class="col-sm-2 control-label">caption</label> 
 
      <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div> 
 
     </div> 
 
     </div> 
 
     
 
     <div class="row"> 
 
     <div class="form-group"> 
 
      <label for="subcaption" class="col-sm-2 control-label">subcaption</label> 
 
      <div class="col-sm-4"> 
 
       <input type="text" id="subcaption" class="form-control"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     
 
     <div class="row"> 
 
     <div class="form-group"> 
 
      <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label> 
 
      <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

Source

2017-10-11 09:16:52 Vishnu

Ceci est par exemple HTML pour le composant de formulaire avec leurs classes par défaut fournies par Bootstrap.

<form> 
    <div class="form-group"> 
    <label for="exampleFormControlInput1">Email address</label> 
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]"> 
    </div> 
    <div class="form-group"> 
    <label for="exampleFormControlSelect1">Example select</label> 
    <select class="form-control" id="exampleFormControlSelect1"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
    </select> 
    </div> 
    <div class="form-group"> 
    <label for="exampleFormControlSelect2">Example multiple select</label> 
    <select multiple class="form-control" id="exampleFormControlSelect2"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
    </select> 
    </div> 
    <div class="form-group"> 
    <label for="exampleFormControlTextarea1">Example textarea</label> 
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> 
    </div> 
</form>

Réf. Essayez d'utiliser leurs classes par défaut et si vous avez besoin d'une personnalisation, ajoutez vos classes personnalisées aux éléments et remplacez les styles.

Source

2017-10-11 09:18:31 sajee

Vous pouvez faire une chose, tout d'abord vous pouvez utiliser la balise de formulaire en tant que classe parent, puis appliquer la marge supérieure à tous l'étiquette, plutôt classe conteneur. ou vous pouvez donner une classe pour étiqueter un tag comme .customlabel et ensuite utiliser cette classe et ajouter une propriété. par exemple.

form label{ 
float:left; 
with:100%; 
margin-top:10px; 
} 

.customlabel { 
    float:left; 
    with:100%; 
    margin-top:10px; 
}

Source

2017-10-11 12:11:31

Rembourrage manquant sur les rangées Bootstrap

Répondre

Questions connexes