2017年7月26日 星期三

調整Bootstrap 裡的 input-group 高度

Bootstrap 裡使用  input-group ，可以很輕易的讓使用者建構出鮮明清爽的輸入項目。

但有發現嗎？在備註二，如果內容的文字一多，就會出現這種爆表的現象。

目前找到一個有效的解決方式，就是透過調整 CSS ，針對 .input-group-btn, .input-group .form-control 這些 class 設定  height: auto
但單單僅這樣設定，反而造成其他尚未有 input 內容的畫面變得很乾扁。

所以再針對每一個項目設定了最小高度，例如：min-height: 30px;

經由這樣的設定後，整體呈現總算有及格了。


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    
    <style>
        .input-group-addon {
            /*設定每個 input-group-addon 都有固定寬度 */
            min-width:180px;
        }

        .input-group{
            padding-bottom:2px;
        }

        /*自動根據內容調整高度，同時設定最小高度*/
        .input-group-btn, .input-group .form-control
        {
            height: auto;
            min-height: 30px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div class="container">

        <div>
        &nbsp;
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon">學生姓名</span>
                        <asp:Label id="lb_學生姓名" runat="server"  CssClass="form-control" Text="張小明" ></asp:Label> 
                </div>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon">年級班級</span>
                        <asp:Label id="lb_班級" runat="server"  CssClass="form-control" Text="五年一班" ></asp:Label> 
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon">備註一</span>
                        <asp:Label id="lb_備註一" runat="server"  CssClass="form-control" Text="" ></asp:Label> 
                </div>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon">備註二</span>
                        <asp:Label id="lb_備註二" runat="server"  CssClass="form-control" Text="2014年校慶運動會跑步第一名<br>2015年校慶運動會跑步第二名<br>2016年全國運動會跑步第一名" ></asp:Label> 
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

參考：.input-group-lg causes textarea's height to shrink to a single line
張貼者： 李志堅 於 7/26/2017 02:35:00 下午
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)