Html 输入响应宽度引导_Html_Css_Twitter Bootstrap_Input

Html 输入响应宽度引导

html css twitter-bootstrap input

Html 输入响应宽度引导,html,css,twitter-bootstrap,input,Html,Css,Twitter Bootstrap,Input,当我调整浏览器窗口的大小时，我想将输入宽度从100%更改为50%，并使其位于中心并响应 <!DOCTYPE html> <html> <head> <title>teste</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &

当我调整浏览器窗口的大小时，我想将输入宽度从100%更改为50%，并使其位于中心并响应

    <!DOCTYPE html>
<html>
<head>
    <title>teste</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <form class="form">
                <input type="email" class="form-control" id="exampleInputEmail1">
            </form>
        </div>

    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>


睾丸

JSFIDLE:

如果您将CSS文件放在html头部引导CSS文件之后，它应该覆盖宽度，我认为您可以删除！那很重要。这段代码有点不方便

.form控件{
保证金：自动；
左：0；
右：0；
宽度：50%！重要；
}

您尝试过什么CSS？不需要

左：0或<代码>右侧：0，在他的示例中，他的样式.css
在引导后链接，因此您可以安全地删除！重要信息
。您可能还需要添加最小宽度：100px或类似，以防止移动设备上的输入太小。
#exampleInputEmail1 {
    width: 50%;
    display: block;
    margin: 0 auto;
}