logo标签列表

根据图像宽度自动调整div部分大小？

htmlcsstwitter-bootstrap
5
我正在开发一个基于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％。 就像这样：

不确定是否可能

我知道可以浮动图像，但我不希望所有在图像所在行上的输入框都与其相同宽度。 我希望它们能够扩展。

将图像设置为右浮动，并添加一些填充。不要使用inline-block。 - frenchie
3
我建议你提供一个小提琴。 - elad.chen
1
已添加！http://jsbin.com/neqosoduqe/1/edit - Zach Hall
这不是bootstrap的工作方式。请记住，bootstrap是面向移动设备的。在较窄的屏幕上，您期望什么布局？您希望图像位于输入框上方、下方或者中间吗？我并不是说它不能做到，但您会违背所使用的框架的基本原则，因此必须仔细考虑。 - abl
没错。在窄屏幕上，图像将独立于行上。页面将以图像优先的方式构建，然后以适合移动设备的方式呈现表单的其余部分。此效果仅适用于桌面视图。 - Zach Hall
4个回答
0

你尝试过将前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>
0

我看到你的代码中有许多不同格式的列，这使得它表现得无法控制。 尽量只使用一种格式，比如说class="col-lg-6"。 据我所知，Bootstrap使用100%的form-control，我们可以通过选择适当的列类来修改它。

为了满足您的需求，您可以创建新的CSS文件，将其放置在bootstrap.min.css下方。然后将图像浮动到右侧，并设置min-width和max-width以使其根据浏览器窗口自动调整大小。

此外，在图像属性内使用class='img-responsive'，以使其自动调整大小。

0
使用浮动属性float: right; 

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

.form-horizontal {
  float: right;
}
<img class="img-right">
<form class="form-horizontal">
</form>

0

你只需要像下面这样为图像和表单添加一些浮动：

(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 }
嗯...有没有办法让下面的自动展开，就像这样？http://i.imgur.com/4ufPJT3.png - Zach Hall
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接