Question

大家好我试图使用twitters bootstrap实现一个水平形式，但由于某种原因，标签继续显示为块级项目而不是浮动在文本框旁边。我的代码如下，任何人都可以提供帮助。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->

    <script src="/Scripts/jquery-2.0.3.min.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/js/prettyPhoto/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="/js/document.ready.js" type="text/javascript"></script>
    <link href="/js/prettyPhoto/prettyPhoto.css" rel="stylesheet" type="text/css">
    <link href="/css/loggedin.css" rel="stylesheet" type="text/css">
</head>
<body screen_capture_injected="true">
    <form method="post" action="feedback.aspx" id="form1" class="form-horizontal">
        <div class="container">
            <div class="row">
                <h1>Feedback &amp; comments</h1>
                <div class="row">
                    <p>Please use the form below to give us your feedback, comments, and suggestions to improve the site.</p>
                    <fieldset>
                        <legend>Feedback</legend>
                        <div class="control-group">
                            <label class="control-label" for="MainBodyContent_TxtEmail">Email</label>
                            <div class="controls">
                                <input name="ctl00$MainBodyContent$TxtEmail" type="text" value="" id="MainBodyContent_TxtEmail" class="input-xlarge" placeholder="Email">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="MainBodyContent_TxtEmail">Name</label>
                            <div class="controls">
                                <input name="ctl00$MainBodyContent$TxtName" type="text" id="MainBodyContent_TxtName" class="input-xlarge" placeholder="Name">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="MainBodyContent_TxtEmail">Comments</label>
                            <div class="controls">
                                <textarea name="ctl00$MainBodyContent$TxtComments" rows="2" cols="20" id="MainBodyContent_TxtComments" class="input-xlarge" placeholder="Comments"></textarea>

                            </div>
                        </div>
                        <input type="submit" name="ctl00$MainBodyContent$SendFeedback" value="Send" id="MainBodyContent_SendFeedback" class="btn">
                    </fieldset>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Answer 1

您必须使用列，您可以在documentation of Bootstrap中查看示例（向下滚动到水平表单）。

代码示例：

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

使用bootstrap的水平形式

1 个答案: