Question

您可以在我的演示中看到按钮没有正确对齐： - （

是否可以：

1）在输入字段和按钮之间有一个空格。

2）按钮是否垂直对齐？

代码：

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-sm-6">
		<div class="panel panel-default">
			<div class="panel-body form-horizontal payment-form">
				<div class="form-group">
					<label for="concept" class="col-sm-4 control-label">Postcode</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input type="text" class="form-control" id="concept" name="concept">
							<div class="input-group-btn">
								<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue"  align="top" type="submit" style="margin-bottom:10px">Find Address</button>
								<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue"  align="top" type="submit">Change</button>
							</div>
						</div>
					</div>
				</div>

＆＃13;

Answer 1

https://jsfiddle.net/a3xnqy33/

<div class="col-sm-6">
    <div class="panel panel-default">
        <div class="panel-body form-horizontal payment-form">
            <div class="form-group">
                <label for="concept" class="col-sm-4 control-label">Postcode</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input type="text" class="form-control" id="concept" name="concept">
                        <div class="input-group-btn inup-group-addon">
                            <button class="btn btn-default">Find Address</button>
                            <button class="btn btn-default" name="Continue" id="Continue"  align="top" type="submit">Change</button>
                        </div>
                    </div>
                </div>
            </div>

请参阅修改过的小提琴

Answer 2

嘿你也可以查看以下内容。在你的代码中，你没有正确关闭你的div。

<div class="col-sm-6">
    <div class="panel panel-default">
        <div class="panel-body form-horizontal payment-form">
            <div class="form-group">
                <label for="concept" class="col-sm-3 control-label">Postcode</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="concept" name="concept">
                </div>
                <div class="col-sm-4">
                    <div class="input-group-btn">
                        <button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Find Address</button>
                        <button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Change</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

对齐输入字段旁边的按钮 - Twitter Bootstrap CSS

2 个答案: