右边的输入和文本
右边的输入和文本
提问于 2022-01-08 22:36:12
我的最后一个输入有问题，在正确的123458上有一个文本。
我的文本太右了，怎么才能在引导5中向左移动呢？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<div class="home-content container ">
<h1 class="text-center pt-5 pb-3">Sélection d'un portefeuille </h1>
<form>
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="nameVariable" class="form-label">Nom du Titulaire</label>
</div>
<div class="col-4">
<input type="text" class="form-control" name="nameVariable" style="min-width: 380px" aria-describedby="emailHelp" required>
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="nameVariable" class="form-label">Intitulé</label>
</div>
<div class="col-4">
<input type="text" class="form-control" name="nameVariable" style="min-width: 380px" aria-describedby="emailHelp" required>
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col">
</div>
<div class="col text-start">
<button type="submit" class="btn btn-primary">Rechercher</button>
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="nameVariable" class="form-label"
>Numero d'identification</label
>
</div>
<div class="col-4">
<input
type="text"
class="form-control"
name="nameVariable"
style="max-width: 190px"
aria-describedby="emailHelp"
required
/>
</div>
(Ex:123458)
</div>
<div class="row row-cols-3 pt-3">
<div class="col"></div>
<div class="col text-start">
<button type="submit" class="btn btn-primary">Rechercher</button>
</div>
</div>
</form>
</div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-09 13:02:29
您已经标记了“引导5”问题，但是代码示例使用的是“引导4”。
要对齐文本，将其放在col-4中，并使表单控件d-inline使其成为display:inline，并使所有文本流向输入的右侧。
<div class="home-content container ">
<h1 class="text-center pt-5 pb-3">Sélection d'un portefeuille </h1>
<form>
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="nameVariable" class="form-label">Nom du Titulaire</label>
</div>
<div class="col-4">
<input type="text" class="form-control" name="nameVariable" style="min-width: 380px" aria-describedby="emailHelp" required>
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="nameVariable" class="form-label">Intitulé</label>
</div>
<div class="col-4">
<input type="text" class="form-control" name="nameVariable" style="min-width: 380px" aria-describedby="emailHelp" required>
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col">
</div>
<div class="col text-start">
<button type="submit" class="btn btn-primary">Rechercher</button>
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="nameVariable" class="form-label">Numero d'identification</label>
</div>
<div class="col-4">
<input type="text" class="form-control d-inline" name="nameVariable" style="max-width: 190px" aria-describedby="emailHelp" required />
(Ex:123458)
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col"></div>
<div class="col text-start">
<button type="submit" class="btn btn-primary">Rechercher</button>
</div>
</div>
</form>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70636990
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号