如何使用文本的宽度百分比（％）？

Question

我有文本框和标签。我希望并排显示并希望宽度：文本的100％（所以我需要这个：当页面大小改变时文本宽度改变）但我没有。

这是我的代码：

<div class="col-xs-6 col-md-6">
    <div class="form-group clearfix">
        <label for="UxSearch">Search:</label>
        <input type="text" name="UxSearch" id="UxSearch" class="form-control"/>
    </div>
</div>

这是我的css课程：

form-group {
    margin-bottom: 15px;
}

.form-control {
    display: block;
    width: 100%;
    height: 29px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.25;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

宽度：100％有效但文字和标签不对齐（如照片）

但这就是我想要的：

我试过显示：内联阻止但没有发生。

你能帮我吗？

Answer 1

col-xs-6表示在移动div中将采用hafl宽度的设备屏幕（＆lt; 768px）

.form-group {
display:inline-flex;
width:100%;

}
.form-control {
display: block;

height: 29px;
padding: 6px 12px;
font-size: 12px;
line-height: 1.25;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-6 col-md-6">
<div class="form-group clearfix">
    <label for="UxSearch">Search:</label>
    <input type="text" name="UxSearch" id="UxSearch" class="form-control"/>
</div>
</div>