Bootstrap输入组大小

Question

我在网页上工作并且在设计上遇到一些问题，这是我需要帮助的代码段：

<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在屏幕较小时打破了输入，工作正常...我不在乎“Descripción”输入在精简版屏幕中是否相同，但在大屏幕中需要更多的声音。

以下是“custom-input-group”的css：

@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;
    }
}

非常感谢你。抱歉我的英文。

Answer 1

我建议您使用扩展点击输入框进行描述。

<div class="container-fluid"> 

    

    <!--expanding input field -->   
    <h2 class="timeline-title">Expanding Input (CSS only)</h2>
    <p><small class="text-muted">Grows wider when clicked...</small></p>
    <input class="form-control input-lg" id="myInput" placeholder="Click here" type="text">
</div>

这里有CSS。

body {
background-color:#e9e9f4;}
/* expanding input CSS only */ #myInput{  width:130px;   -webkit-transition:width 0.3s ease-in-out; } #myInput:focus    {  width:100%;  -webkit-transition:width 0.5s ease-in-out;}

希望这会有所帮助

Answer 2

您好，只需在输入标记中使用Size=50。希望它可以帮助您

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