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