个人中心
gpt4 book ai didi

javascript - Bootstrap 内联表单布局

转载 作者：行者123 更新时间：2023-11-28 07:41:16 24 4
gpt4 key购买 nike

我正在使用 bootstrap，我正在尝试使用 form-inline 方法制作一个包含输入框列表和下拉列表的简单页面。

我希望表单域之间的距离明显相等，并且如果可能的话，使大小相对于标签和域长度。这是我得到的丑陋结果，只是为了解释:

enter image description here

正如您从下面的代码中看到的，我将每个字段的列大小设置为 3，试图使每一行包含 4 个输入，但结果很难看:如果标签太长，我将看不到内容在下拉列表中，每个输入之间的间距取决于输入的长度，因此结果并不醒目。

下一个问题是输入之间的垂直间距。显然，所有内容都应该采用相同的形式才能进行一次提交，这就是输入需要换行时的结果。我显然想要一个很好的垂直间距，但我不知道该怎么做。

这是页面的代码:

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-it" lang="it-it">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="shortcut icon" href="../resources/miotema/favicon.ico" />
  <title>Tool fgfgfg</title>
  <script src="<c:url value="/resources/miotema/js/jquery-2.1.4.min.js" />" type="text/javascript" ></script>
  <script src="<c:url value="/resources/miotema/js/bootstrap.min.js" />" type="text/javascript" ></script>
  <script src="<c:url value="/resources/miotema/js/common.js" />" type="text/javascript" ></script>
  <link rel="stylesheet" href="<c:url value="/resources/miotema/css/bootstrap.min.css" />" type="text/css" />

 </head>
 <body>
  <div class="navbar navbar-default">
   <div class="container-fluid">
    <div class="collapse navbar-collapse">

     <ul class="nav navbar-nav navbar-right menu header">
      <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">TEST<span class="caret"></span></a>
       <ul class="dropdown-menu" role="menu">
        <li><a href="<c:url value="/studi/visualizza" />">Visualizza </a></li>
        <li><a href="<c:url value="/studi/crea" />">Nuovo</a></li>
        <li class="divider"></li>
        <li><a href="#">Voce Menu separato</a></li>
       </ul>
      </li>
      <li><a href="javascript:chiamataAjax()">Chiamata Ajax</a></li>
      <li><a href="javascript:doLogoutAction()">Logout</a></li>
     </ul>
    </div>
   </div>
  </div>
  <div class="container-fluid">

<form class="form-inline" action="<c:url value="/insert" />"
    method="post">
    <div class="well bs-component">
        <fieldset>
            <legend>Inserimento Dati</legend>


            <div class="form-group col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon"><strong>testtttttttttttt</strong></span> <select class="form-control"
                        name="durata_contrattuale">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </div>
            </div>

            <div class="form-group col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon"><strong>uahuaduhaudhtfftftftftftftfuadu</strong></span> <select class="form-control" name="capacita_banda">
                        <option>10 Mb/s</option>
                        <option>20 Mb/s</option>
                        <option>30 Mb/s</option>
                        <option>40 Mb/s</option>
                        <option>50 Mb/s</option>
                        <option>60 Mb/s</option>
                        <option>70 Mb/s</option>
                        <option>80 Mb/s</option>
                        <option>90 Mb/s</option>
                        <option>100 Mb/s</option>
                        <option>200 Mb/s</option>
                        <option>300 Mb/s</option>
                        <option>Altro</option>
                    </select>
                </div>
            </div>

            <div class="form-group col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon"><strong>fy</strong></span> <select class="form-control"
                        name="opzione_realizzazione">
                        <option>Basic</option>
                        <option>Plus</option>
                        <option>Ultra</option>
                    </select>
                </div>
            </div>

            <div class="form-group col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon"><strong>dtddtdttd</strong></span> <select class="form-control" name="ultra_protezione">
                        <option>Si</option>
                        <option>No</option>
                    </select>
                </div>
            </div>



    <div class="form-group col-lg-3">
        <div class="input-group">
            <span class="input-group-addon"><strong>blablabalbala</strong></span>
            <select class="form-control" name="lbublbu">
                <option>3</option>
                <option>4</option>
                <option>5</option>

            </select>
        </div>
    </div>

    </fieldset>
    </div>

</form>
</body>
</html>

有什么提示吗？

最佳答案

首先，您错过了“ROW”类元素，该元素将作为您创建的所有 col-3 的parent。其次是 5 col-3's****，这意味着 15 不是 12 应该是的网格。尝试计算哪些输入应该比其他输入大，并计算您需要多少列。之后让它和等于到12，你也可以尝试把width: 100%;作为输入.

关于javascript - Bootstrap 内联表单布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30939466/

24 4 0
文章推荐： swift - 有没有办法在 swift 中缩短首选项列表
文章推荐： HTML select 不考虑边距
文章推荐： html - 可变高度容器内的垂直滚动导航
文章推荐： javascript - SVGforeignObject文本未出现在移动浏览器中
行者123
个人简介

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

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