Question

我有一个表单组，它包含一个带有插件的输入字段，一个带有图像的复选框和一个旁边的按钮，它们彼此相邻显示，但是当我给出我的复选框高度时宽度图像和按钮向下移动我不知道为什么，我该如何解决？这是我的代码：

＆＃13;

.box{
height: 34px;
width: 34px;
}

.btn-default{
height: 34px;
width: 34px;
}

＆＃13;

<div class="col-lg-12 form-group">
  <div class="pull-right">
    <img src="http://placehold.it/34x34"><input type="checkbox" class="box">
  <button type="button" class="btn btn-default">+</button>
</div>
<div>
<div class="input-group">
  <span class="input-group-addon">@</span>
    <input type="text" class="form-control"/>
</div>
</div>
</div>

＆＃13;

Answer 1

您可以使用网格系统轻松管理布局请查看以下示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
	input.checkbox-input{height: 34px;width: 34px;margin-top: 0;}
</style>
<div class="container-fluid">
			<div class="row">
				<div class="col-lg-12 form-group">
					<div class="col-md-1 col-sm-1 col-xs-1">
						<img src="http://placehold.it/34x34">
					</div>
					<div class="col-md-1 col-sm-1 col-xs-1">
						<input type="checkbox" class="checkbox-input">
					</div>
					<div class="col-md-1 col-sm-1 col-xs-1">
						<button class="btn" value="+">+</button>
					</div>
                   <div class="col-md-9 col-xs-9 input-group">
					 <span class="input-group-addon">@</span>
					 <input type="text" class="form-control">
				    </div>
				</div>
				
			</div>
		</div>

复选框大小使其他元素在该行下面

1 个答案: