web-dev-qa-db-fra.com

Définir la largeur d'une zone de texte dans Bootstrap 3

Je cherchais un moyen de faire en sorte que ma "textarea" passe à 100% dans sa colonne. J'ai vu différentes méthodes (aucune ne m'a permis de travailler) de créer une extension de texte à 100% dans Bootstrap. J'ai tout, des styles CSS en ligne personnalisés à l'utilisation de class = "form-control col-lg-12" à l'écrasement du CSS de Bootstrap.

Quelqu'un a une suggestion de travail qui permettrait un redimensionnement fluide?

Voici le code que j'ai. Pour le moment, la largeur va un peu au-delà du texte d’emplacement 

<div class="row">
            <div class="col-lg-7">
                <h2>@Model.EmployeeName</h2>
                <h3>Employee #: @Model.EmployeeNumber</h3>

                <h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
                <textarea rows="2" placeholder="Exception Log comments."></textarea>
            </div>
            <div class="col-lg-5 text-right">
                <div ng-controller='TimeCtrl'>
                    <h2>{{ clock | date:'fullDate'}}</h2>
                    <h1>{{ clock | date:'HH:mm:ss'}}</h1>
                    <input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
                </div>
            </div>
        </div>
csstwitter-bootstraptwitter-bootstrap-3
5
Caverman

Je pense que la classe d’éléments de formulaire de Bootstrap (contrôle de formulaire) est ce qui permettra aux éléments de formulaire d’occuper toute la largeur de la colonne dans laquelle ils se trouvent.

<textarea class="form-control"></textarea>
7
georaldc

class="form-control" doit fonctionner. Si cela ne fonctionne pas, cela signifie que quelque part dans le fichier css, la propriété max-width est définie pour la zone de texte, ce qui limite la largeur. Dans ce cas, vérifiez le fichier site.css et supprimez la propriété max-width.

4
Shah Aadil

Ajoutez simplement une classe 'contrôle de formulaire' à textarea. Si vous travaillez sur un petit écran, col-lg-7 et col-lg-5 couvrent toute la fenêtre.

Et vos colonnes de texte sont différentes. Vous pouvez voir le col-sm-12 sur votre écran.

<textarea class="form-control" rows="2" placeholder="Exception Log comments."></textarea>
3
oguzhancerit

Si vous ajoutez seulement du CSS personnalisé, vous pouvez le forcer à utiliser toute la largeur du conteneur.

min-width: 100%
max-width: 100%

Cependant, l’utilisation de la classe bootstrap "form-control" accomplit également cette tâche.

0
Peter Finn

Ajoutez simplement la classe form-control à votre textarea si vous voulez une largeur de 100%, inutile d'ajouter col-lg-12 bcoz. La classe form-control donne la largeur à 100% du parent à l'élément.

<textarea class="form-control" rows="4" placeholder="Exception Log comments."></textarea>
0
Bhuwan