以下のコードで、ブラウザ幅を狭めると、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>