html – Bootstrap .form-horizo​​ntal无法正常工作

html – Bootstrap .form-horizo​​ntal无法正常工作,第1张

概述我是第一个尝试bootstrap的人.我想要实现的是让标签和输入相同的线条干净整洁. 任何人都可以解释为什么在下面的示例标签仍然高于输入?难道我做错了什么? <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta application-name="Test-System"> <meta na 我是第一个尝试bootstrap的人.我想要实现的是让标签和输入相同的线条干净整洁.

任何人都可以解释为什么在下面的示例标签仍然高于输入?难道我做错了什么?

<!DOCTYPE HTML><HTML><head lang="en">    <Meta charset="UTF-8">    <Meta application-name="Test-System">    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">    <!-- bootstrap Latest compiled and minifIEd CSS -->    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/CSS/bootstrap.min.CSS">    <!-- bootstrap Latest compiled and minifIEd JavaScript -->    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/Js/bootstrap.min.Js"></script>    <!-- jquery UI from Google CDN -->    <link rel="stylesheet" href="//AJAX.GoogleAPIs.com/AJAX/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.CSS" />    <Title></Title></head><body>    <form >        <div >            <label for="input1" >Label</label>            <div >                <input ID="input1" type="text">            </div>        </div>        <div >            <label for="input2" >Label</label>            <div >                <input ID="input2" type="text">            </div>        </div>    </form>     <!-- jquery from Google CDN -->     <script src="//AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.11.0/jquery.min.Js"></script>     <!-- jquery UI from Google CDN -->     <script src="//AJAX.GoogleAPIs.com/AJAX/libs/jqueryui/1.10.4/jquery-ui.min.Js"></script></body></HTML>
解决方法
<div >                <label for="input1" >Label</label>                <input ID="input1" type="text"> </div>

这是你想要的?

编辑
输入div外部的水平标签.

<div >        <label for="input1" >Label</label>        <div >            <input ID="input1" type="text">        </div>    </div>
总结

以上是内存溢出为你收集整理的html – Bootstrap .form-horizo​​ntal无法正常工作全部内容,希望文章能够帮你解决html – Bootstrap .form-horizo​​ntal无法正常工作所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1077685.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-27
下一篇2022-05-27

发表评论

登录后才能评论

评论列表(0条)

    保存