Javascript Boostrap内联表单布局_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript Boostrap内联表单布局

javascript jquery html css twitter-bootstrap

Javascript Boostrap内联表单布局,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在使用bootstrap，并尝试使用forminline方法创建一个包含输入框和下拉列表的简单页面我希望表单字段之间的距离明显相等，如果可能的话，使其大小相对于标签和字段长度。这是我得到的丑陋结果，只是为了解释：从下面的代码中可以看出，我给每个字段设置了3个col size，试图使每行包含4个输入，但结果很糟糕：如果标签太长，我看不到下拉列表的内容，则每个输入之间的间距取决于输入的长度，因此结果并不引人注目下一个问题是输入之间的垂直间距。显然，所有内容都应该以相同的形式进行一次提交，

我正在使用bootstrap，并尝试使用

forminline

方法创建一个包含输入框和下拉列表的简单页面

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

从下面的代码中可以看出，我给每个字段设置了3个col size，试图使每行包含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>


工具FG












达蒂插入
testtttttttttt
1.
2.
3.
uahuaduhaudhtfftadu
10 Mb/s
20 Mb/s
30 Mb/s
40 Mb/s
50 Mb/s
60 Mb/s
70 Mb/s
80 Mb/s
90 Mb/s
100 Mb/s
200 Mb/s
300 Mb/s
阿尔特罗
fy
基本的
加
过激的
dtddtdttd
硅
不
blabalbala
3.
4.
5.

有什么提示吗？

试试这个：

@media (min-width: 992px){
    .bs-component .form-control{
        margin-bottom: 15px; 
    }
}

首先，您错过了“行”类元素，该元素将作为您制作的所有col-3的父元素。第二个是5 col-3的****表示15的网格，而不是12的网格。试着数一数哪些输入应该比其他输入大，并记下您需要多少列。在这之后，使其和等于12，并且您可以尝试将
宽度设置为100%用于输入。不确定这是否能解决您的问题，但您可能希望容器和col-lg-3S之间有一个，因此我声明包含4个表单组，每个表单组包含col-md-3 类？是的，但您可能希望例如行和列，而不是列1、列3、列2、列6。试着看看这是否有助于你把事情安排下来。如果有5个元素的行和大于1列，3列，2列，4列，2列，你可以这样做。好的，这样我可以给每个字段指定我想要的大小，但是我想没有办法在每个字段之间建立统一的水平间距，对吧？引导可以帮你，但是你需要指定宽度：100%给输入元素，这样它就可以占据整个部门。像这样试试吧。您将获得水平空间，稍后还可以通过向保存输入的父div提供填充来控制水平空间。