Question

我正在开发一个Bootstrap 3中的表单，它有一系列文本控件和图像。表单占用其容器的100％，文本输入也设置为100％宽度。当我不必担心图像时，这很有效。我使用bootstrap .form-control和.form-horizontal类来使它工作（代码在底部）：

当前观看

I use the bootstrap .form-control and .form-horizontal

我需要将图像放在这些表单控件的右侧并适当减小它们的宽度：

样机

Mockup of what I'm talking about

我只是在Bootstrap的网格系统中放入另一个列来处理这个问题，但是我还希望在完成图像时将列恢复到全宽，如上面的模型图所示。与Microsoft Word中的“紧凑”图像布局类似的东西。我已尝试将float:right;和display:inline-block'设置为图片类，但结果不正确：

尚未正常工作

What I have right now.

任何人都知道如何让设计像我在模型中描述的那样工作吗？

<!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％。像这样：

not sure if it's possible

我知道图像可以浮动，但我不希望它下面的所有输入与图像线上的输入宽度相同。我希望他们扩大。

Answer 1

您只需要在图像和表单中添加一些浮点数，如下所示：

（FIDDLE）

HTML

<img class="img-right">
<form class="form-horizontal">
</form>

CSS

.img-right {
  float: right; 
  max-width: 200px; 
  padding-left: 20px }

.form-horizontal {
  float: right }

Answer 2

您是否尝试将前3个或4个输入和图像放在自己的行中？这将导致行扩展到容器的宽度并使图像保持在右侧。您还可以将类class="img-responsive"添加到图像中，以便在屏幕缩小时缩小。

<div class="row">
  <div class="col-sm-8">

      //inputs go here

  </div>
  <div class="col-sm-4">

     //image goes here

  </div>
</div>
<div class="row">
  <div class="col-sm-12> 

   //the rest of your inputs here

  </div>
</div>

Answer 3

我在你的代码中看到了很多种格式列。这使得它表现得无法控制。请尝试仅使用一种格式，例如class="col-lg-6。只要我知道，bootstrap使用100％进行表单控制，我们可以通过选择合适的列类来修改它。

为了满足您的需求，您可以创建新的CSS文件。将它放在下面 bootstrap.min.css。然后将图像浮动到右侧并设置最小宽度和最大宽度（％），以便根据浏览器的窗口自动调整大小。

此外，在图像attr中使用class='img-responsive'使其自动调整大小。

Answer 4

使用float property float: right;

＆＃13;

.img-right {
  float: right; 
  max-width: 200px; 
  padding-left: 20px;
}

.form-horizontal {
  float: right;
}

＆＃13;

<img class="img-right">
<form class="form-horizontal">
</form>

＆＃13;

根据图像的宽度自动调整div的各个部分？

4 个答案: