Question

我很抱歉，如果这只是一个简单的问题，但是当谈到元素的对齐/定位以及类似的东西时，我真的很糟糕。所以这里就是这样。

我只想让glyphicon出现在不在其上方的文本字段旁边。只是。我尝试将其放在表单标记内，但结果是一样的。这是我的代码。

<div id="form" class="collapse in">
        <div id="loginwrong" style="display: inline-block; vertical-align: top;">
            <div id="loginwrong2" style="display: none;">
                <span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"></span>
            </div>
        </div>

        <form method="POST" class="form-inline" role="form">
            <input type="password" name="pw" placeholder="Enter Password" class="form-control">
            <input type="submit" class="btn btn-primary" name="submit" value="Submit">
        </form>
    </div>

我还有一个脚本，如果密码错误，将显示glyphicon。（它基本上是一个接受密码的文本域）

<?php
echo "<script type='text/javascript'>
                    $('#loginwrong2').show();
                </script>";
?>

Answer 1

来自http://getbootstrap.com/css/#forms-control-validation

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

示例小提琴：https://jsfiddle.net/s8p0xyyc/

Answer 2

如果您使用bootstrap，则应使用bootstrap设计表单

＆＃13;

let request = CNContactFetchRequest(keysToFetch: [CNContactIdentifierKey as CNKeyDescriptor, CNContactPhoneNumbersKey as CNKeyDescriptor, CNContactFormatter.descriptorForRequiredKeys(for: .fullName)])

do {
    try store.enumerateContacts(with: request) { contact, stop in
        if let name = formatter.string(from: contact) {
            print(name)
        } else if let firstPhone = contact.phoneNumbers.first?.value {
            print(firstPhone.stringValue)
        } else {
            print("no name; no number")
        }
    }
} catch let fetchError {
    print(fetchError)
}

＆＃13;

<?php
echo "<script type='text/javascript'>$('#loginwrong2').show();</script>";
?>

＆＃13;

PD：这不是一个php问题

Answer 3

只需添加正确的类并使用表单中的内容移回跨度

<div id="form" class="collapse in form-group  ">

        <form method="POST" class="form-inline  has-feedback" role="form">
            <input type="password" name="pw" placeholder="Enter Password" class="form-control">
            <input type="submit" class="btn btn-primary" name="submit" value="Submit">
             <span id="loginwrong2" class="glyphicon glyphicon-remove-circle form-control-feedback" aria-hidden="true" style="color: red; font-size: 2em;"></span>
        </form>
    </div>

Answer 4

感谢所有回答的人！我通过为glyphicon创建一个div并为表单创建div来得到我想要的东西。两个div都有显示：样式中的内联块。

<div id="form" class="collapse in">
        <div id="loginwrong" style="display: inline-block; vertical-align: top;">
            <div id="loginwrong2" style="display: none;">
                <span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"> </span>
            </div>
        </div>
        <div style="display: inline-block;">
          <form method="POST" class="form-inline" role="form">
            <input type="password" name="pw" placeholder="Enter Password" class="form-control">
            <input type="submit" class="btn btn-primary" name="submit" value="Submit">
        </form>
        </div>
    </div>

Answer 5

更改您的css make <span id="loginwrong2"> {position:absolute;left:12%;top:10%}

看到这个 http://www.bootply.com/BLgAr0zrLA

如何将一个字形对齐到一个表单？

5 个答案: