#bootstrap-4
#начальная загрузка-4
Вопрос:
Я не знаю, возможно ли это. Я хочу создать форму с двумя столбцами, где во втором столбце есть текстовое поле, с моим фактическим кодом, который я могу поместить только в строку с остальной частью формы. Что-то вроде этого макета. Я пробовал с помощью form-row, но это сработало не так, как ожидалось.
HTML-форма:
<form class="form-horizontal" id="formulario">
<div class="form-group mt-3 mb-3 col">
<label for="tipo">Tipo:</label>
<input type="text" class="form-control ml-3" id="tipo" name="tipo" [(ngModel)]="asignatura.tipo" placeholder="Tipo">
</div>
<div class="form-group mb-3 col">
<label for="categoria">Categoría:</label>
<select class="custom-select ml-3" id="categoria" name="categoria" [(ngModel)]="asignatura.categoria" >
<option *ngFor="let cat of categorias" name="categoria" [ngValue]="cat">{{cat.nombre}}</option>
</select>
</div>
<div class="form-group mb-3 col">
<label for="formato">Formato:</label>
<div class="form-check-inline">
<input type="radio" class="form-check-input ml-4" id="formato" name="formato" value="Teamp;oacute;rica" [(ngModel)]="asignatura.formato">
<label class="form-check-label" for="formato">
Teórica
</label>
</div>
<div class="form-check-inline">
<input type="radio" class="form-check-input" id="formato2" name="formato" value="Pramp;aacute;ctica" [(ngModel)]="asignatura.formato">
<label class="form-check-label" for="formato">
Práctica
</label>
</div>
</div>
<div class="form-group mt-3 mb-3 col">
<label for="codigo">Código:</label>
<input type="text" class="form-control ml-3" id="codigo" name="codigo" [(ngModel)]="asignatura.codigo" placeholder="Codigo">
</div>
<div class="float-right form-group mt-3 mb-3 col">
<label for="descripcion">Descripción:</label>
<textarea type="text" cols="23" rows="2" class="form-control ml-3" id="descripcion" name="descripcion" [(ngModel)]="asignatura.descripcion" placeholder="Descripcion"></textarea>
</div>
</form>
Ответ №1:
Я. Это возможно. Вы должны использовать form-row класс с form тегом.
внутри формы сделайте два divs по col-* вашему желанию, и это будет работать так же хорошо, как и с row
Посмотрите следующий фрагмент, я тоже сделал его отзывчивым. Если это не то, что вам нужно, пожалуйста, дайте мне знать.
:root {
/* colors */
--main-color: #2ecc71;
--submit-hover: #1c9950;
}
.contact .my__form input[type="text"],
.contact .my__form input[type="email"],
.contact .my__form textarea {
border: none;
border-bottom: 1px solid #cccccc;
box-shadow: none;
border-radius: 0;
}
.contact .my__form .textarea__group,
.contact .my__form textarea {
height: 100%;
}
@media (max-width: 991px) {
.contact .my__form .textarea__group,
.contact .my__form textarea {
height: 200px;
}
}
input[type="submit"] {
background-color: var(--main-color);
color: white;
padding: 12px 20px;
border: none;
width: 150px;
border-radius: 4px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
input[type="submit"]:hover {
border: none;
background-color: var(--submit-hover);
}
.hidden {
display: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
input[type="submit"]:focus {
font-weight: 500;
outline: 1px solid var(--main-color);
} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<section class="contact padding-top-bottom custom__outline text-center" id="contact">
<div class="container">
<h2 class="h2__style text-uppercase d-inline-block position-relative custom__underline mb-5" data-title="contact me">
contact me
</h2>
<form class="my__form form-row mt-5 " method="POST" name="contact__main">
<input type="hidden" name="form-name" value="contact__main" />
<p class="hidden">
<label>
Don’t fill this out if you're human: <input name="bot-field" />
</label>
</p>
<div class=" col-lg-6 ">
<div class="input-group ">
<p class="hidden">
<label>
Don’t fill this out if you're human:{" "}
<input name="bot-field" />
</label>
</p>
<label htmlFor="username" class="sr-only">
Your name
</label>
<input class="w-100 my-2 form-control-lg" id="username" type="text" name="YourName" placeholder="Your Name" />
</div>
<div class="input-group">
<label htmlFor="email" class="sr-only">
Email
</label>
<input class="w-100 my-2 form-control-lg" id="email" type="email" name="Email" placeholder="Email" />
</div>
<div class="input-group">
<label htmlFor="subject" class="sr-only">
Subject
</label>
<input class="w-100 my-2 form-control-lg mb-lg-0" id="subject" type="text" name="Subject" placeholder="Subject" />
</div>
</div>
<div class=" col-lg-6 ">
<div class="input-group h-100 textarea__group">
<label htmlFor="message" class="sr-only">
message
</label>
<textarea class="w-100 p-3 form-control-lg " id="message" name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="input-group justify-content-start">
<input class="m-1 my-2 custom__submit mt-5 " type="submit" value="Submit" />
</div>
</form>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous">
</script>