HTML поля занимают всю ширину страницы? - PullRequest
Новая
       6

HTML поля занимают всю ширину страницы?

0 голосов
/ 15 января 2020

Я создаю форму в HTML 5, как я упоминал ранее, но когда я создаю форму, поля слишком велики, то есть они занимают всю ширину страницы, как показано на следующем рисунке,

enter image description here

это мой код в HTML5, 

<div id="divCreateGenders" data-bind="visible: IsNew">
    <form id="FormCreateGenders" method="post">
        <div class="form-horizontal" data-bind="with: GenderModel">
            <h3><strong>Crear Nuevo</strong></h3>
            <br />
            <div class="form-group">
                <label class="control-label col-md-2"><strong>Codigo:</strong></label>
                <div class="col-md-10">
                    <input id="TextboxGenderId" name="TextboxGenderId" type="text" class="form-control" data-bind="value: GenderId" maxlength="1" placeholder="Por ejemplo, I" required />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2"><strong>Genero:</strong></label>
                <div class="col-md-10">
                    <input id="TextboxGenderName" name="TextboxGenderName" type="text" class="form-control" data-bind="value: GenderName" maxlength="15" placeholder="Introduzca un genero..." required />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <button class="btn btn-success" data-bind="click: $parent.Create">Crear</button>
                </div>
            </div>
        </div>
    </form>
</div>

кто-то может мне помочь с этим, так как у меня мало знание css, буду признателен за помощь

Ответы [ 2 ]

1 голос
/ 15 января 2020

Вам просто нужно уменьшить col-width bootstrap column, содержащего текстовое поле (поле формы) 

<label class="control-label col-md-2"><strong>Genero:</strong></label>
<div class="col-md-10"> --Reduce this to a smaller column width
     <input id="TextboxGenderName" name="TextboxGenderName" type="text" class="form-control" data-bind="value: GenderName" maxlength="15" placeholder="Introduzca un genero..." required />
</div>

Вместо использования ширины столбца 10, уменьшите его до 2, 3 или 4. и др c. пока это не ширина, которую вы хотите. Кроме того, если вы хотите сохранить эту адаптивность для разных размеров представления, вам нужно использовать col-lg col-md col-sm и col-xs с соответствующим значением ширины столбца, чтобы сохранить его в правильном размере, когда ширина экрана равна либо изменены, либо просмотрены на разных устройствах.

Примерно так: 

<label class="control-label col-lg-2 col-md-2 col-sm-3 col-xs-3"><strong>Genero:</strong></label>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-3"> --Just an example
    <input id="TextboxGenderName" name="TextboxGenderName" type="text" class="form-control" data-bind="value: GenderName" maxlength="15" placeholder="Introduzca un genero..." required />
</div>
0 голосов
/ 15 января 2020 
input {
    max-width: 280px;
}

должен помочь.

В качестве альтернативы вы можете использовать % или vw вместо px в зависимости от вашего варианта использования.

или вы можете изменить свой col-md-10 на что-то меньшее, например col-md-4

...