我的面板内的列太小了

时间:2017-10-06 01:07:14

标签: html twitter-bootstrap

从我的图片中可以看出,我有一个内部有2列的面板。我还需要这些列来获取表单的输入字段。问题是我无法使输入字段宽度与列的大小相同。任何帮助将不胜感激。

enter image description here

WITH T(N) AS (SELECT 1 FROM (VALUES (1), (1), (1), (1), (1), (1), (1), (1), (1), (1), (1), (1), (1), (1), (1), (1)) AS A(B)), -- 16
    T2(N) AS (SELECT ROW_NUMBER() OVER (ORDER BY (SELECT NULL)) - 1 FROM T AS A CROSS JOIN T AS B CROSS JOIN T AS C CROSS JOIN T) -- 16^4.
SELECT WhiteSpaceCharacters = NCHAR(N)
FROM T2
WHERE NCHAR(N) COLLATE Japanese_Unicode_CS_AS_KS_WS = NCHAR(32);

1 个答案:

答案 0 :(得分:0)

更改

<div class="form-group">
    <label class="col-md-2 control-label" for="Column1Row1">Column1Row1</label>
    <div class="col-md-4">
        <input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
    </div> 
</div>

<div class="row form-group">
    <label class="col-md-3 control-label" for="Column1Row1">Column1Row1</label>
    <div class="col-md-9">
        <input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
    </div>
</div>

我已经包含了row类,然后在row内部,您需要将标签和输入扩展为12列。因此,标签占据3列,输入字段占9列。

示例:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
	<div class="col-md-12">
		<form method="POST" class="form-horizontal" role="form">
			<div class="panel panel-default">
				<div class="panel-heading">
					Test Heading
				</div>
				<div class="panel-body">
					<div class="row">
						<div class="col-md-6">
							<div class="row form-group">
								<label class="col-md-3 control-label" for="Column1Row1">Column1Row1</label>
								<div class="col-md-9">
									<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
								</div>
							</div>

						</div>
						<div class="col-md-6">
							<div class="row form-group">
								<label class="col-md-3 control-label" for="Column2Row1">Column2Row1</label>
								<div class="col-md-9">
									<input class="form-control input-sm" type="text" name="" value="" id="Column2Row1">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
</div>