引導錯誤 - 輸入有錯誤的反饋圖形不是垂直居中？

爲什麼glyphicon-warning-sign form-control-feedback未在下面的代碼中垂直居中 - 在將font-size: 20px;添加到label之後？引導錯誤 - 輸入有錯誤的反饋圖形不是垂直居中？

<div class="container"> 

     <div class="content align-left contact"> 
     <p>Hello World!</p> 
     <form action="#" method="post" id="contact-form"> 

      <div class="form-group has-error has-feedback"> 
      <label for="inputName">Your Name (required)</label> 
      <input type="text" name="name" class="form-control" id="input-name" placeholder="Name"> 
      <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> 
      <span id="inputWarning2Status">(warning)</span> 
      </div> 

     </form> 
     </div> 

</div>

CSS：

.has-feedback .form-control-feedback { 
    border: 1px solid black; 
} 

.content { 
    padding: 100px; 
} 
.content p { 
    font-size: 18px; 
    letter-spacing: 1px; 
    line-height: 30px; 
    padding-bottom: 20px; 
} 
.content.contact label { 
    font-weight: 700; 
} 
.content.contact label { 
    font-size: 20px; // this is where the error cause - but why!??? 
}

結果：

的警告文字是不是太紅。

任何想法？

at jsfiddle但我找不到bootstrap作爲加載選項！

編輯：

你可以看到錯誤在bootply

來源

2016-11-30 laukok

你應該bootply（沒有的jsfiddle）自舉的例子使用 – Pete

布拉德的答案是好的，但它是部分的。當你改變標籤的大小，或者你在輸入之前添加更多的內容時，它會被再次銷燬。由於元素.form-control-feedback具有絕對位置，因此您應該在共同父項中使用輸入進行變形，以便始終得到正確的結果。添加這個CSS：

.warning { 
    color:#a94442; 
} 
.my-group { 
    position: relative; 
}

並更新您HTML：

<div class="form-group has-error has-feedback"> 
    <label for="inputName">Your Name (required)</label> 
    <div class="my-group"> 
     <input type="text" name="name" class="form-control" id="input-name" placeholder="Name"> 
     <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> 
    </div> 
    <span id="inputWarning2Status">(warning)</span> 
</div>

工作演示：http://www.bootply.com/jGxRAFMKkg

來源

2016-11-30 10:46:33 debute

我喜歡這個解決方案，而不需要引導引導程序！謝謝！ – laukok

是的，沒有黑客攻擊的解決方案永遠是最好的:)不客氣。 – debute

1）您可以添加外部資源的jsfiddle在屏幕的左側，使用引導CDN。

2）標籤的字體大小導致問題。該圖標是固定的，不會因標籤大小的改變而變得更好（不要問我爲什麼 - 使用引導記錄）。

3）的FIX：添加以下的CSS：

.has-feedback label~.form-control-feedback { 
    top:33px; 
} 
.warning { 
    color:#a94442; /*add this class to your warnings span*/ 
}

DEMO https://jsfiddle.net/10yLhpu3/

來源

2016-11-30 10:05:38 Brad

感謝，但爲什麼'33px'？ – laukok

字體大小的增加將輸入框向下推。總共是33px。我認爲默認bootstrap do top：20px;或類似的東西，所以如果你增加字體大小，你還需要增加頂部：33px;相應地 – Brad

感謝布拉德的解釋！ – laukok

-1

從樣式

.content.contact label { font-size: 20px; }

除去此在這行代碼在加警告類

<span class="glyphicon glyphicon-warning-sign form-control-feedback warning" aria-hidden="true"></span>

添加任何類名，然後替換你這個

.warning { font-size: 20px; }

來源

2016-11-30 10:08:51 LecheDeCrema

刪除樣式一下添加到您的樣式表：

.glyphicon-warning-sign{ 
    margin-top:8px; 
    } 

    #inputWarning2Status{ 
    color:red; 
    }

http://www.bootply.com/gy41ldchWf

，它會工作正常。

來源

2016-11-30 10:08:55

引導錯誤 - 輸入有錯誤的反饋圖形不是垂直居中？

回答

相關問題