使用引导程序

Question

我有一个将在模态中弹出的表单，但我需要它集中，所以我可以减小模态的大小。 这是我到目前为止所得到的：

http://s7.postimg.org/ierno14ln/2015_08_06_114302.png

我觉得这个空间正在酝酿之中。＃34;保留＆＃34;对于我没有使用的列。 我可以使用什么，所以我可以减少它的大小？ 这是我的代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<div id="div_pedidoWeb" class="form-inline modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">                                                  
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Pedido Web</h4>
            </div>
            <div class="container-fluid">
                <div class="modal-body">  
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="txt_usuario">Usu&aacute;rio:</label>
                        </div>                  
                        <div class="col-md-2">
                            <input name="txt_usuario" id="txt_usuario" type="text" class="form-control" size="20" maxlength="37" />
                        </div>
                        <div class="col-md-2 text-align">
                            <label for="txt_nr_pedido">N&uacute;mero Pedido WEB:</label>
                        </div>
                        <div class="col-md-2">
                            <input name="txt_nr_pedido" id="txt_nr_pedido" type="text" class="form-control" size="20" maxlength="37" />
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="txt_situacao">Situa&ccedil;&atilde;o:</label>
                        </div>
                        <div class="col-md-2">
                            <input name="txt_situacao" id="txt_situacao" type="text" class="form-control" size="20" maxlength="37"  />
                        </div>
                        <div class="col-md-2 text-align">
                            <label for="txt_tipo_pedido">Tipo de Pedido:</label>
                        </div>
                        <div class="col-md-2">
                            <input name="txt_tipo_pedido" id="txt_tipo_pedido" type="text" class="form-control" size="20" maxlength="37"  />    
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="txt_cod_representante">Representante:</label>
                        </div>
                        <div class="col-md-1">
                            <input name="txt_cod_representante" id="txt_cod_representante" type="text" class="form-control" size="1" maxlength="37"  />
                            <img src="lupa.png" name="img_zoom_representante"  id="img_zoom_representante">
                        </div>
                        <div class="col-md-2">
                            <input name="txt_desc_representante1" id="txt_desc_representante1" type="text" class="form-control" size="20" maxlength="37" />
                        </div>
                        <div class="col-md-3">
                            <input name="txt_desc_representante2" id="txt_desc_representante2" type="text" class="form-control" size="20" maxlength="37" style="width: 100%" /> 
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="txt_cod_cliente">Cliente:</label>
                        </div>  
                        <div class="col-md-1">
                            <input name="txt_cod_cliente" id="txt_cod_cliente" type="text" class="form-control" size="1" maxlength="37"  />
                            <img src="lupa.png" name="img_zoom_cliente"  id="img_zoom_cliente">
                        </div>  
                        <div class="col-md-2">
                            <input name="txt_desc_cliente1" id="txt_desc_cliente1" type="text" class="form-control" size="20" maxlength="37" style="margin-right: 126px;" />
                        </div>  
                        <div class="col-md-3">                  
                            <input name="txt_desc_cliente2" id="txt_desc_cliente2" type="text" class="form-control" size="20" maxlength="37" style="width: 100%" />
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="txt_cnpj">CNPJ:</label>
                        </div>
                        <div class="col-md-3">
                            <input name="txt_cnpj" id="txt_cnpj" type="text" class="form-control" maxlength="37" style="width: 100%" /> 
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label style="padding-top: 12px" for="txa_endereco">Endere&ccedil;o:</label>
                        </div>
                        <div class="col-md-6">
                            <textarea name="txa_endereco" id="txa_endereco" type="text" class="form-control" rows="5" style="width: 100%"></textarea>   
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="txt_pedido_cliente">Pedido Cliente:</label>
                        </div>
                        <div class="col-md-2">
                            <input name="txt_pedido_cliente" id="txt_pedido_cliente" type="text" class="form-control" size="10" maxlength="37"  />  
                        </div>
                        <div class="col-md-2 text-align">
                            <label for="txt_moeda">Moeda:</label>
                        </div>
                        <div class="col-md-2">
                            <input name="txt_moeda" id="txt_moeda" type="text" class="form-control" size="20" maxlength="37"  />    
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="txt_emissao">Emiss&atilde;o:</label>
                        </div>
                        <div class="col-md-2">
                            <input name="txt_emissao" id="txt_emissao" type="text" class="form-control" size="10" maxlength="37"  />    
                        </div>
                        <div class="col-md-2 text-align">
                            <label for="txt_data_entrega">Data de Entrega:</label>
                        </div>
                        <div class="col-md-2">
                            <input name="txt_data_entrega" id="txt_data_entrega" type="text" class="form-control" size="20" maxlength="37"  />  
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="sl_destino_mercadoria">Destino Mercadoria:</label>
                        </div>
                        <div class="col-md-1">
                            <select name="sl_destino_mercadoria" id="sl_destino_mercadoria" class="form-control">
                                <option value="00">Selecione</option>
                            </select>
                        </div>
                        <div class="col-md-2 text-align">
                            <label for="txt_cod_pagamento">Cond. de Pagamento:</label>
                        </div>
                        <div class="col-md-2" style="width: 8%">
                            <input name="txt_cod_pagamento" id="txt_cod_pagamento" type="text" class="form-control" size="1"/>
                            <img src="lupa.png" name="img_zoom_pagamento"  id="img_zoom_pagamento">
                        </div>
                        <div class="col-md-2">
                            <input name="txt_desc_pagamento" id="txt_desc_pagamento" type="text" class="form-control" size="16"/>
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="txt_cod_tab_precos">Tabela Pre&ccedil;os:</label>
                        </div>
                        <div class="col-md-1">
                            <input name="txt_cod_tab_precos" id="txt_cod_tab_precos" type="text" class="form-control" size="5"/>
                        </div>
                        <div class="col-md-4">
                            <input name="txt_desc_tab_precos" id="txt_desc_tab_precos" type="text" class="form-control" style="width: 100%"/>
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label style="padding-top: 12px" for="txa_obs_cliente">Observa&ccedil;&otilde;es do Cliente:</label>
                        </div>
                        <div class="col-md-6">
                            <textarea name="txa_obs_cliente" id="txa_obs_cliente" type="text" class="form-control" rows="5" style="width: 100%"></textarea>
                        </div>
                    </div>
                    <div class="row top-buffer">
                        <div class="col-md-2 text-align">
                            <label for="txt_email">Email:</label>
                        </div>
                        <div class="col-md-3">
                            <input name="txt_email" id="txt_email" type="text" class="form-control" maxlength="37" style="width: 100%" />   
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Confirmar</button>               
            </div>
        </div>
    </div>
</div>

Answer 1

I believe this is what you are looking for 。在引导库之后将该代码添加到任何样式的css将创建流动的模式，因此它们将根据您的内容调整大小。

Answer 2

我找到了我想要的东西。我发现bootstrap col- - 设置指定不同宽度，具体取决于col- - 的值始终尝试填充100％宽度。在我的情况下，它在每列中应用了166％的宽度，因此总数为66,4。右侧的空白区域是剩下的33.6％。我在所有列中使用col-md-3解决了我的问题，因此总列数为12（4 * 25 = 100％）。