Setzen Sie die Textbereichsbreite im Bootstrap-Modal auf 100 %

Habe alle möglichen Wege probiert, aber nie geschafft:

    <div style="float: right">
        <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Comment</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="form-control col-xs-12"></textarea>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger">Decline</button>
                </div>
            </div>
        </div>
    </div> 

Wie kann man den Textbereich in Modal-Body-Div so gestalten, dass er den gesamten verfügbaren Platz abdeckt = Breite 100%?

Versuchen Sie es mit Hinzufügen min-width: 100% zum Stil Ihres Textbereichs:

<textarea class="form-control" style="min-width: 100%"></textarea>

Wenn ich das richtig verstehe ist das was du suchst.

.form-control { width: 100%; }

Sehen Demo auf JSFiddle.

Die bereitgestellten Lösungen lösen das Problem. Sie wirken sich jedoch auch auf alle anderen aus textarea Elemente im gleichen Stil. Ich musste das lösen und habe gerade einen spezifischeren Selektor erstellt. Hier ist, was ich mir ausgedacht habe, um invasive Veränderungen zu verhindern.

.modal-content textarea.form-control {
    max-width: 100%;
}

Dieser Selektor mag zwar aggressiv erscheinen. Es hilft, die textarea in den Inhaltsbereich des Modals selbst.

Außerdem ist die min-width Die oben vorgestellte Lösung funktioniert mit grundlegenden Bootstrap-Modals, obwohl ich Probleme bei der Verwendung mit Angle-ui-Bootstrap-Modals hatte.

Sie können das Attribut auch einfach hinzufügen row="number of rows" und cols="number of columns" mögen

<div class="modal-body">
    <textarea class="form-control col-xs-12" rows="7" cols="50"></textarea>
</div>

Dadurch wird die Anzahl der Zeilen im Textbereich erhöht, die sehr ähnlich zu sind style="min-height: 100%" 100 % oder 80 % und min-width: 50% für Breite etc. Auch row=7 ändert die Höhe und cols=50 ändert die Breite des Textbereichs.

Ich hatte das gleiche Problem. Ich habe es behoben, indem ich dieses Codestück in den Stil des Textbereichs eingefügt habe.

resize: vertical;

Sie können die Bootstrap-Referenz überprüfen Hier

Nachdem ich diese Vorschläge hier getestet habe, ziehe ich den Schluss, dass wir zwei Dinge anwenden müssen.

1. Sich bewerben form-control Klasse zu deinem textarea Element. Dies ist eine der integrierten Klassen von Bootstrap.

2. Erweitern Sie diese Klasse, indem Sie die folgende Eigenschaft hinzufügen:

.form-control {
   max-width: 100%;
}

Ich hoffe, dies hilft anderen, die nach einer Lösung für dieses Problem suchen.

Ich bin neu in der .NET/MVC-Programmierung, aber ich verstehe, dass die Site.css-Datei (unter dem Inhaltsordner in MVC) eine Überschreibung auf Site-Ebene für Bootstrap-CSS ist, mit der Sie native Bootstrap-Einstellungen in einem portablen und nicht -zerstörerische Weise (z. B. können Sie Ihre site.css-Änderungen einfach speichern und erneut anwenden, wenn Sie Bootstrap auf Ihrem System aktualisieren.)

In Bootstrap 3.0.0 hat Site.css die folgende Stileinstellung:

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Andere Blogs haben vorgeschlagen, dass diese 280px-Breite kurz vor einem Veröffentlichungsdatum hinzugefügt wurde, um die Benutzeroberfläche besser aussehen zu lassen als bei einer Eingabe von 100 % Breite. Glücklicherweise wurde es an einer “sichtbaren” Stelle in der Site-Datei platziert, damit Sie es bemerken würden.

Ändern Sie einfach die Breiteneinstellung, entweder für alle drei Eingabearten, oder ziehen Sie Textbereich heraus und geben Sie ihm eine eigene Einstellung, wenn Sie die anderen in Ruhe lassen möchten.