如何设置每个表单组的相同宽度？

Question

我使用form-control-static类来显示第一个form group类的内联，我希望该宽度与第二个form-group宽度相同，因为我使用了{{ 1}}那个。我怎么修理它？

＆＃13;

＆＃13;

form-control

＆＃13;

＆＃13;

＆＃13;

Answer 1

Use this code.It works fine
 <form id="att_chart_serach">
           <div class="form-group"> <!-- first one   -->
                <a class="btn btn-default col-sm-2 form-control-static prev_year"> &laquo; </a>                     
                <select class="form-control-static col-sm-8" data-toggle="select" name="show_month" id="show_month">
                        <option>dfs</option>
                </select>
                <a  class="btn btn-default col-sm-2 form-control-static next_year"> &raquo; </a>
           </div>
           <div class="form-group"> <!-- second -->
                <select  class="form-control" name="deptselect" id="dept_name">            
                         <option selected>Select Department</option>
                </select>
           </div>
           <input type="submit" id="att_sub" class="btn btn-success form-control-static img-rounded" value=""> 
        </form>

Answer 2

使用此代码，这是最好的方法：

＆＃13;

＆＃13;

.select-box {
position:relative;
  padding:0 40px;
}
.select-box a.btn {
position:absolute;
  top:0;
}
.select-box .prev_year {
left:0
}
.select-box .next_year {
right:0
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="att_chart_serach" class="form-inline sm-left">
   <div class="form-group"> <!-- first one   -->
     <div class="select-box">
    <a class="btn btn-default form-control-static prev_year"> &laquo; </a>                     
    <select class="form-control" data-toggle="select" name="show_month" id="show_month">
            <option>dfs</option>
    </select>
    <a  class="btn btn-default form-control-static next_year"> &raquo; </a>
       </div>
   </div>
   <div class="form-group"> <!-- second -->
    <select  class="form-control" name="deptselect" id="dept_name">            
             <option selected>Select Department</option>
    </select>
   </div>
   <input type="submit" id="att_sub" class="btn btn-success form-control-static img-rounded" value=""> 
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将此插入您的css

#show_month {
    width: calc(100vw - 75px);
}

#show_month {
    width: calc(100vw - 75px);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="att_chart_serach" class="form-inline sm-left">
   <div class="form-group"> <!-- first one   -->
    <a class="btn btn-default col-sm-2 form-control-static prev_year"> &laquo; </a>                     
    <select class="form-control-static col-sm-4" data-toggle="select" name="show_month" id="show_month">
            <option>dfs</option>
    </select>
    <a  class="btn btn-default col-sm-2 form-control-static next_year"> &raquo; </a>
   </div>
   <div class="form-group"> <!-- second -->
    <select  class="form-control" name="deptselect" id="dept_name">            
             <option selected>Select Department</option>
    </select>
   </div>
   <input type="submit" id="att_sub" class="btn btn-success form-control-static img-rounded" value=""> 
</form>