31090


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

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

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

[code]

    <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>
[/code]


CC BY-SA 4.0
2016-12-10T18:35:06.840
31075
2019-12-13T20:16:20.130
2019-12-13T20:15:50.897
32986
7966
question
html css twitter-bootstrap
ブラウザ幅を変更すると、inputが入力できなくなるときがある


select要素を囲うdiv要素に、`col-xs-カラム数`のclassが不足しているためではないでしょうか。  
試しに`col-xs-12`や`col-xs-6`などを追加すると動作しました。


CC BY-SA 3.0
2016-12-12T00:47:11.987
31088
2016-12-12T00:47:11.987
19759
31075
answer


ここにcol-xs-を指定しなかった理由は何でしょうか。

[code]

    <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>
    
[/code]

  
col-xs-*を追加すれば、問題が解消されると思います。

[code]

    <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-xs-6 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>
[/code]


CC BY-SA 4.0
2016-12-12T03:40:37.367
31090
2019-12-13T20:16:20.130
2019-12-13T20:16:20.130
32986
13152
31075
answer