Question

当我调整浏览器窗口的大小时，我想从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>

Answer 1

#exampleInputEmail1 {
    width: 50%;
    display: block;
    margin: 0 auto;
}

Jsfiddle：https://jsfiddle.net/ygvhs676/1/

Answer 2

如果你把CSS文件放在html head部分的bootstrap CSS文件之后它应该覆盖宽度，我想你可以删除！重要的话。片段有点不方便。

.form-control{
  margin: auto;
  left:0;
  right:0;
  width:50% !important;
}

<div class="container">
        <div class="row">
            <form class="form">
                <input type="email" class="form-control" id="exampleInputEmail1">
            </form>
        </div>

    </div>
    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

输入响应宽度引导程序

2 个答案: