webentwicklung-frage-antwort-db.com.de

bootstrap für Textfeldgröße erhöhen (ASP.NET-MVC)

Gibt es eine Möglichkeit, die Größe (Länge) von Textfeldern in horizontaler Form zu erhöhen?

<div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</div>

Ich habe versucht, die col-md-*-Klassen zu ändern, aber es hat nicht funktioniert.

12
den

Alternativ können Sie dazu einfach die col-md-x-Klasse im div ändern, mit der Ihr Textfeld und die Überprüfungsnachricht auf die gewünschte Breite umrahmt werden. 

Ändern Sie dies beispielsweise:

<div class="col-md-10">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

zu diesem:

<div class="col-md-5">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

Ihr Textfeld wird jetzt die Breite von 5 Spalten anstelle von 10 haben. Dies erfordert keine zusätzlichen Klassen. Ein zusätzlicher Bonus besteht darin, dass bei einer längeren Bestätigungsnachricht innerhalb des gleichen Bereichs wie Ihr Textfeld umbrochen wird.

5
ryanulit

Alle Antworten waren hilfreich.

Meine Absicht war, die voreingestellte Max-Breite in meiner CSS zu ändern, da sie die Größe einschränkte

input, select, textarea {
    max-width: 500px;
}

Das Ändern der col-md- * -Klasse funktionierte gut.

vielen Dank

10
den

normalerweise hat Ihr Tag ein Feld mit maximaler Breite. Wenn Sie es als ändern

text {
    max-width: 100%;
    width: 100%;
}

dann können Sie die volle verfügbare Breite erreichen. Wenn Sie dies für mehrere Geräteauflösungen vornehmen, ist es besser, die prozentuale Breite anstelle der festen Breite in px zu verwenden. Hoffe das hilft dir.

3
Anish Kumar

Ich füge eine Klasse zu deiner Textbox hinzu:

 @Html.TextBoxFor(model => model.Name, new { @class = "form-control long-textbox" })

Dann stylen Sie es in Ihrem CSS:

.long-textbox{
    width:300px;
}

Sie können das Größenattribut verwenden, aber ich denke, dass dies eher eine Stilistik ist und in CSS verwaltet werden sollte.

3
Mister Epic

Verwenden Sie die HTML INPUT-Eigenschaft "Size".

Beispiel:

@Html.TextBoxFor(model => model.Name, new { @class = "form-control", size="15" })
@Html.TextBoxFor(model => model.Other, new { @class = "form-control", size="25" })
1
Rafael A. M. S.

In Bootstrap 3 setzt die Klasse form-controlinput Elemente auf 100% des Containers.

Alternativ können Sie Ihren eigenen Stil manuell anwenden:

@Html.TextBoxFor(model => model.Name, new { @class = "wide-control" })

Mit CSS wie folgt:

input.wide-control {
    width: 300px;
}
1
DavidG

DIE BESTE LÖSUNG

wechseln Sie in MVC C # -Projekt zu: Inhaltsordner> site.css

Und ändern Sie max-width im CSS-Stil für input select textarea

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

**ES WIRD KLAPPEN **

0
Piotr New

Setzen Sie die Größe in die Textbox-Eingabe selbst ein, wie bereits erwähnt. Sie müssen keine neue Klasse erstellen, um die Breite zu verarbeiten.

<div class="col-md-10">
...
   @Html.TextBoxFor(model => model.Name, new { @class = "form-control col-md-10" })
...
</div>
0
paulyb

Sie können ein Textfeld verwenden und das style-Attribut zusammen mit dem Schlüsselwort new verwenden, wie das Beispiel unten zeigt

@Html.TextBoxFor(model => model.Detail, new { style = "width:600px" })

Es kann auch für LabelFor verwendet werden

@Html.LabelFor(model => model.Detail, "Detail", new { @class = "control-label col-md-4", style = "width:160px" }) 
0
Scanner

Ich versuche immer, die Größe nicht zu ändern, ich lasse die Dinge den Raum füllen und benutze das Rastersystem.

Dies hilft, auf allen Bildschirmgrößen zu arbeiten.

Vielen Dank

http://plnkr.co/edit/2ZczWMsNk9arscbY26j8?p=preview

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-md-2">Wide</label>
    <div class="col-md-10">
      <input class="**form-control**"  type="TextBox"/>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2">Not as Wide</label>
    <div class="col-md-8">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2">Narrow</label>
    <div class="col-md-6">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <input type="submit" value="Create" class="btn btn-default" />
    </div>
  </div>
</div>
0
Steve Drake