以下のコードで、ブラウザ幅を狭めると、inputの編集ができなくなります。
どうもbootstrapのcssが影響しているようです。
感覚的にはグリッドシステムのcol-xs-**～col-sm-**の幅範囲になると起きているような気がします。

最小限のコードを切り出してみました。
同じ内容をcodepenにも入れてあります。
http://codepen.io/tomorin/pen/XNBPvL?editors=1010

すみませんが、どうしたらよいか教えて下さい。

<html>
<head>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css" />
  
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
</head>
<body>
 <div class="container-fluid">
  <div class="row-fluid">
   <div class="col-sx-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 edit-form text-center">
    <div class="row-fluid">
     <div class="form-group">
      <div class="col-xs-6 col-sm-4 col-lg-4 edit-form">
       <input type="text" class="form-control input-sm jscolor {width:260, height:180, position:'right',
    borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666'}" id="stname" value="TEST" />
      </div>
     </div>
     <div class="form-group">
      <div class="col-sm-4 col-lg-4 edit-form">
       <select class="form-control">
        <option>aaa</option>
        <option>bbb</option>
        <option>ccc</option>
       </select>
      </div>
     </div>
    </div>
   </div>
  </div><!-- /.row-fluid -->
 </div><!-- /.container-fluid -->
</body>
</html>