表单内联中的引导输入自定义宽度

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 像素的设备为目标。 你可能想调查一下。