引导程序输入组大小 [英] Bootstrap input group sizes

问题描述

我正在处理一个网页，并且在设计中遇到了一些问题，这是我需要帮助的代码段:

I'm working on a web page and have some problems with the design, this is the piece of code where I need some help:

<form id="form_articulo_ver" method="post" action="./articulo/articulo_ver.php" role="form" target="frame_articulo_ver">
    <div class="input-group col-md-3">
        <div class="input-group-btn">
            <button class="btn btn-primary" type="button" onClick="busca_referencia()" data-toggle="tooltip" data-placement="top" title="Buscar Referencia"><span class="glyphicon glyphicon-search"></span>&nbsp;</button>
        </div>
        <input type="text" class="form-control" placeholder="Referencia"/>
        <span class="input-group-btn">
            <button class="btn btn-success" type="button" onClick="aceptar_referencia()" data-toggle="tooltip" data-placement="top" title="Confirmar Referencia"><span class="glyphicon glyphicon-ok"></span>&nbsp;</button>
        </span>                                     
    </div>
</form>
<br>
<form id="form_lineas_ref" method="post" action="./articulo/frame_lineas.php" role="form" target="frame_lineas">    
    <div class="input-group custom-input-group">
        <input type="hidden" class="form-control"/>
        <span class="input-group-addon">Desc.</span>
        <input type="text" class="form-control" placeholder="Descripción"/>
        <span class="input-group-addon">Precio</span>
        <input type="text" class="form-control" placeholder="Precio"/>
        <span class="input-group-addon">Uds.</span>
        <input type="text" class="form-control" placeholder="Unidades"/>
        <span class="input-group-addon">Dcto. %</span>
        <input type="text" class="form-control" placeholder="Descuento"/>
        <span class="input-group-addon">Importe</span>
        <input type="text" class="form-control" placeholder="Importe"/>
        <span class="input-group-addon">€</span>
        <div class="input-group-btn">
            <button class="btn btn-success" type="button" onClick="aceptar_linea()" data-toggle="tooltip" data-placement="top" title="Añadir linea"><span class="glyphicon glyphicon-ok"></span>&nbsp;</button>
        </div>
    </div>
</form>

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" id="frame_lineas" name="frame_lineas" frameborder="0"></iframe>
</div>

此代码如下:

但是我需要Descripción"输入大于其他输入.我发现一个css可以在屏幕较小时中断输入，可以正常工作...我不在乎lite屏幕中Descripción"输入的大小是否相同，但是在大型屏幕中需要更多的机智.

But I need "Descripción" input to be larger than the others. I found a css that breaks the input when the screen is smaller, works fine... I don't care if "Descripción" input is same size in lite screen but in large ones need to have more witdh.

这是"custom-input-group"的css:

Here is the css of the "custom-input-group":

@media (max-width:500px) { 
    .custom-input-group.input-group .input-group-btn {
        width:99%;
        display:block;
        margin-bottom:5px;
    }
    .custom-input-group.input-group .input-group-btn .btn {
        width: 34%;
    }
    .custom-input-group.input-group .input-group-btn .btn:last-child {
        border-radius:0 4px 4px 0
    }
    .custom-input-group {
        display: block
    }
    .custom-input-group.input-group  .input-group-addon {
        clear: both;
        display: block;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .custom-input-group.input-group .input-group-addon + .form-control {
        border-radius: 4px;
        margin-bottom: 5px;
    }
}

非常感谢.对不起，我的英语.

Thank you very much. Sorry for my English.

推荐答案

你好，只需在输入标签中使用Size=50.希望对您有帮助

Hello Just use Size=50 in your input tag .Hope it will help you

    <span class="input-group-addon ">Desc.</span>
    <input type="text" class="form-control " size="50"  
    placeholder="Descripción"/>

这篇关于引导程序输入组大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！