【发布时间】：2015-02-06 08:04:18
【问题描述】：
我正在 Bootstrap 3 中开发一个包含一系列文本控件和图像的表单。表单占据其容器的 100%，文本输入也设置为 100% 宽度。当我不必担心图像时，这很有效。我使用引导程序 .form-control 和 .form-horizontal 类使其工作（代码在底部）：
当前外观
我需要把图片放在这些表单控件的右边，并适当减小它们的宽度：
样机
我会简单地在 Bootstrap 的网格系统中添加另一列来处理这个问题，但我还希望在图像完成后这些列恢复到全宽，如上面的模型图像所示。类似于 Microsoft Word 中的“紧凑”图像布局。我尝试将float:right; 和display:inline-block' 设置为图像类，但结果不正确：
还没有工作
有人知道如何让设计像我在模型中描述的那样工作吗？
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h2>New Guest</h2>
<form class="form-horizontal" role="form">
<img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" />
<div class="form-group" id="group-tbFirstName">
<label for="tbFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" />
</div>
</div>
<div class="form-group" id="group-tbLastName">
<label for="tbLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" />
</div>
</div>
<div class="form-group" id="group-optGender">
<label for="optGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="optGender" placeholder="Gender" value="" />
</div>
</div>
<div class="form-group" id="group-tbAge">
<label for="tbAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" />
</div>
</div>
<div class="form-group" id="group-dtDateOfBirth">
<label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" />
</div>
</div>
</form>
</div>
</body>
</html>我要实现的具体效果是让图像下方的输入再次扩大到 100%。像这样：
我知道图像可以浮动，但我不希望其下方的所有输入与图像行上的输入具有相同的宽度。我希望他们扩大。
【问题讨论】：
-
将图像作为浮动右侧并添加一些填充。不要为此使用 inline-block。
-
我建议你提供一个小提琴
-
这不是引导程序的工作方式。请记住，引导程序是移动优先的。您希望在较窄的屏幕上采用何种布局？您是否想要输入上方的图像，下方的图像，或者介于两者之间的图像？我并不是说它不能完成，但你会破坏你正在使用的框架的纹理，所以你必须仔细考虑它。
-
确实如此。在狭窄的屏幕上，图像将单独出现在一行中。该页面将首先构建为图像，然后以适合移动设备的方式构建表单的其余部分。此效果仅适用于桌面视图。
标签： html css twitter-bootstrap