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：是否可以更改“有错误”的线条粗细？

回答

相关问题