表单内联的Bootstrap输入自定义宽度

Question

如何在输入组中正确进行自定义宽度输入？ 这样各种设备运行良好。

我的代码在PC中运行，但在手机中却没有。

.someClass {width:550px;}
 @media (min-width: 768px){
    .form-inline .form-control {
    width: 100%;
     } 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://bootswatch.com/3/darkly/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form class="form-inline text-center" role="form">
    <div class="input-group">
        <div class="someClass">
            <input type="text" class="form-control"
                   style="width:100%" placeholder="Name" name="name">
        </div>
        <div class="input-group-btn">
            <button class="btn btn-primary" type="submit">Send</button>
        </div>
    </div>
</form>

Answer 1

您的媒体查询定位最小宽度为768像素的设备。 你可能想看一下。