个人中心
gpt4 book ai didi

html - 如何在 Bootstrap 中将表单字段保持在同一行？

转载 作者：行者123 更新时间：2023-11-28 01:48:39 27 4
gpt4 key购买 nike

我在响应式布局中使用 Bootstrap 3。我正在尝试在同一水平线上安排一个带有名字和姓氏的注册表单。它们应该是正常宽度的 45% 左右，电子邮件和通行证应该低于正常大小(就像默认的 Facebook 主页注册一样。)

我想一个理想的 CSS 解决方案会将每个宽度设置为大约 48%(因此中间有一些空间。)但是当我尝试在外部 CSS 中以 % 定义宽度时，所有表单无论如何都会垂直堆叠(无论缩放。)

我现在用 em 来写宽度。但是，使用 Bootstrap 的响应式布局，当我放大或缩小超过一定限制时，表单字段会垂直堆叠，而不是并排。这发生在 67% 和 110% 的 Chrome 中，但在这些缩放之间效果很好。

我尝试了 Bootstrap 文档中的这个链接，只是 CSS 给我带来了一些麻烦 - http://getbootstrap.com/css/#forms-inline

我的 HTML 文件:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Static Top Navbar Example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="navbar-static-top.css" rel="stylesheet">
    <link href="my-styles.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>

  <body>

    <!-- Static navbar -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
        <!-- form starts here -->
        <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <div class="container">
      <div class="row jumbotron">
        <!-- Main component for a primary marketing message or call to action -->

          <div class="col-sm-7">
            <h1>Navbar example</h1>
            <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
            <p>To see the difference between static and fixed top navbars, just scroll.</p>
            <p>
              <a class="btn btn-lg btn-primary" href="bootstrap/components/#navbar" role="button">View navbar docs &raquo;</a>
            </p>
          </div>

          <div class="col-sm-1">
          </div>


            <form class="form-signin col-sm-4 well" role="form">
              <h2 class="form-signin-heading">Sign Up</h2><hr>



              <div class="form-inline" role="form">
                <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail2">Email address
                  </label>
                  <input class="form-control-md" type="text" id="exampleInputEmail2" placeholder="First Name">
                </div>

                <div class="form-group">
                  <label class="sr-only" for="exampleInputPassword2">Password
                  </label>
                  <input class="form-control-md" type="text" id="exampleInputPassword2" placeholder="Last Name"> 
                </div>
              </div>



              <p></p><p><input type="email" class="form-control" placeholder="Email address" required autofocus></p>

              <p><input type="email" class="form-control" placeholder="Type email again" required autofocus></p>

              <input type="password" class="form-control" placeholder="Password" required>

              <label class="checkbox">
                <input type="checkbox" value="remember-me"> Remember me
              </label>

              <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
            </form>


        </div>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>

我的样式.css

/* Layout
===========================*/

body {
    /*padding-top: 10px; */
}

.container {
    max-width: 1100px
}

.form-control-md {
  display: block;
  width: 10em;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control-md:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.form-control-md:-moz-placeholder {
  color: #999999;
}

.form-control-md::-moz-placeholder {
  color: #999999;
  opacity: 1;
}

.form-control-md:-ms-input-placeholder {
  color: #999999;
}

.form-control-md::-webkit-input-placeholder {
  color: #999999;
}

.form-control-md[disabled],
.form-control-md[readonly],
fieldset[disabled] .form-control-md {
  cursor: not-allowed;
  background-color: #eeeeee;
}

textarea.form-control-md {
  height: auto;
}
/* Jumbotron
===========================

.jumbotron {

}
*/

最佳答案 

<form class="navbar-form navbar-right form-inline" role="form">
    <div class="form-group">
    ...

您需要让类形式内联。

如果你不想使用它，你可以试试这个(选项 2):

http://jsfiddle.net/snlacks/499yB/

如果您需要更多说明，请告诉我。

关于html - 如何在 Bootstrap 中将表单字段保持在同一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21273817/

27 4 0
文章推荐： html - Wordpress 的 Bootstrap 4 主题 - 垂直对齐不起作用
文章推荐： html - css 分页后 :always is not working on table
文章推荐： javascript - 定期调用 AJAX 函数是否会减慢应用程序速度？
文章推荐： c++ - 将返回类型推导为模板参数方法的类型
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com