Bootstrap：是否可以更改「有錯誤」的線條粗細？

你好，我現在用的是has-error類上的輸入，像這樣：Bootstrap：是否可以更改「有錯誤」的線條粗細？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title></title> 
    <meta charset="utf-8"> 
    <meta input1="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

</head> 
<body> 

    <form method="post"> 


     <div class="col-lg-4 col-lg-offset-4 has-error"> 

     <input type="text" name="input" class="form-control"/> 

     </div> 

    </form> 

</body> 

</html>

但我想增加紅色邊框的厚度，所以我想補充一點：

<style> 

.has-error{ 

    line-height:3px; 
} 

</style>

但它沒有效果，那麼是否有可能改變這個類的厚度以及如何去做？

謝謝

來源

2017-06-02 Henri

line-height是不是你想要更改的屬性，嘗試border-width。您還需要將類指定爲.form-control，否則您的樣式將不會應用。

.has-error .form-control{ 
 
    border-width: 3px; 
 
    border-color: blue !important; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8"> 
 
    <meta input1="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</head> 
 
<body> 
 

 
    <form method="post"> 
 

 

 
     <div class="col-lg-4 col-lg-offset-4 has-error"> 
 

 
     <input type="text" name="input" class="form-control"/> 
 

 
     </div> 
 

 
    </form> 
 

 
</body> 
 

 
</html>

希望它能幫助。

來源

2017-06-02 12:23:53 rbock

好的，謝謝，你知道如何更改邊框顏色也對不起，它不包括在我的問題 – Henri

@亨利我已編輯帖子。但使用'！important'時要謹慎。它可能會造成混亂，難以維護CSS。關於這個問題有真正的好文章。 – rbock

-1

line-height是無關聯的邊框厚度 - 它設置元素中的文本的每一行的垂直尺寸。要設置邊框的厚度，使用border-width屬性：

.has-error { 
    border-width: 3px; 
}

來源

2017-06-02 12:19:22

Bootstrap：是否可以更改「有錯誤」的線條粗細？

回答

相關問題