Question

嗨我有几个输入字段，它们有左侧和右侧，左侧只是一个标签，右侧是数据。

但是，字段的左侧是不同的大小，具体取决于其中的文本。我希望所有宽度相同，文本左侧对齐。

这就是我所拥有的：

 <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">hdsfkjdhf</span>
                  </div>
                  <input type="text" class="form-control" placeholder="Loading" value="{{person?.name}}" aria-label="Username" aria-describedby="basic-addon1">
                </div>

              <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">sdf</span>
                  </div>
                  <input type="text" class="form-control" placeholder="Loading" value="{{person?.age}}" aria-label="Age" aria-describedby="basic-addon1">
                </div>

                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">Other Stuff</span>
                  </div>
                  <input type="text" class="form-control" placeholder="Loading" value="{{person?.otherStuff}}" aria-label="Stuff" aria-describedby="basic-addon1">
                </div>

我也在使用bootstrap 4

Answer 1

如果你真的想使用输入组，可以添加一点CSS来控制每个func animateView() { self.vwObj.backgroundColor = arrayColors[animationCount] UIView.animate(withDuration: 3.0, animations: { self.leadng.constant = self.view.frame.size.width + self.vwObj.frame.size.width self.view.layoutIfNeeded() }, completion: { finished in UIView.animate(withDuration: 3.0, animations: { self.leadng.constant = 0 self.view.layoutIfNeeded() }, completion: { finished in self.animationCount = self.animationCount + 1 if self.animationCount < 3 { self.animateView() } }) }) }的宽度......

https://www.codeply.com/go/wv5NMmTgwq

.input-group-prepend

另一种选择是使用带有表单网格布局的自定义边框，如下所示......

.input-group>.input-group-prepend {
    flex: 0 0 20%;
}
.input-group .input-group-text {
    width: 100%;
}

Demo of both options

左侧输入字段大小相同

1 个答案: