Question

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

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

enter image description here

从下面的代码中可以看出，我为每个字段提供了3的col大小，试图让每行包含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>

任何提示？

Answer 1

试试这个：

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

Answer 2

首先，您错过了“ ROW ”类元素，该元素将用作所有 col-3 的父级。其次是 5 col-3 的****，这意味着它应该是 15 而不是 12 的网格。尝试计算哪些输入应该比其他输入更大，并计算您需要多少col。在此之后，将总和等于改为 12 ，您也可以尝试将width: 100%;用于输入。

Boostrap内联表单布局

2 个答案: