Question

我试图创建一个响应式表单，其中一些东西包装，而其他东西则没有。

我希望表单在桌面上看起来像这样

enter image description here

和移动设备上的这个一样

enter image description here

请注意，图标保持在右侧。不幸的是我无法使用背景图像作为图标，因为我需要在图标悬停时显示工具提示。

但是，当我尝试这个时，图标会换行：

enter image description here

那么，我怎样才能使图标成为自己的元素（span或div），而不是在文本字段下面？

以下是一次尝试：http://jsfiddle.net/XVu6V/

以下是Bootstrap 3尝试：http://jsfiddle.net/syhLJ/1/我真的很想使用Bootstrap。

这里有一些HTML：

<div text-element class="form-group row">
    <label for="firstName" class="col-md-2 control-label">First Name</label>
    <div class="col-md-5">
        <input type="text" class="form-control" id="firstName" />
    </div>
    <div class="col-md-1 validation-icon required"></div>
    <div class="col-md-3 validation-message">
        Needed for communication.
    </div>
</div>

Answer 1

为什么不将图标和<input>包装在div中，将div设置为position:relative并添加padding-right相同宽度的图标。然后设置<input> 100％宽和图标position:absolute;top:0;right:0？这会强制图标始终位于<input>的右侧。

类似于http://jsfiddle.net/syhLJ/7/。

你可以在http://fiddle.jshell.net/syhLJ/7/show/查看它的HTML预览，我使用这个解决方案很多，到目前为止它从未失败。

Answer 2

不是最佳选择但你可以尝试绝对定位输入并在较小的屏幕上将其浮动到左侧，同时将图标浮动到右侧。然后我猜输入一个百分比，它会给你一个与它和图标之间的间距。

.form-group .form-control {
    position: absolute;
    float: left;
}

Answer 3

您可以将 col-xx-xx 叠加在一起，而不会覆盖bootstrap的默认样式。

http://jsfiddle.net/99SFW/2/

<div class="container">
    <form class="form-horizontal" role="form">
        <div text-element class="form-group row">
            <label for="firstName" class="col-md-2 col-sm-2 col-xs-12 control-label">First Name</label>
            <div class="col-md-5 col-sm-5 col-xs-9">
                <input type="text" class="form-control" id="firstName" />
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1 validation-icon required"></div>
            <div class="col-md-3 col-sm-12 col-xs-12 validation-message">Needed for communication.</div>
        </div>
    </form>
</div>

enter image description here

Answer 4

我已更新你的小提琴here

HTML就是这样......

<form>
    <div>
        <label for="firstName" class="label">First Name</label>
        <div class="input">
            <input type="text" class="form-control" id="firstName" />
        </div>
        <div class="icon">R</div>
        <div class="validation">Needed for communication.</div>
    </div>
</form>

和css

.input {
    float: left;
    width:calc(100% - 35px);
    max-width: 500px;
}
.icon {
    float: left;
    background-color: orange;
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 4px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    color: white;
    font-weight: bold;
}

.validation {
    float: left;
}

Answer 5

或者你可以向右浮动按钮并以负边距向上拖动。

.form-group .validation-icon {
  float: right;
  margin-top: -33px;
}
@media (min-width: 992px) {
  .form-group .validation-icon {
    float: left;
    margin-top: 0;    
  }
}
.form-control {
    width: 90%;
}

http://jsfiddle.net/Anp7s/2/

如何制作一些不以响应形式包装的东西？

5 个答案: