0

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

2 件の回答 2

2

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

1
  • どうやらそのようでした。数を合わせたらちゃんと動きました!
    – tomorin
    Commented 2016年12月15日 11:57
1

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

<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>

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

<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>

1
  • ありがとうございます!col-xs-*が抜けていることに気づけませんでした。ちゃんと対になっていないとおかしな事になってしまうのですね!
    – tomorin
    Commented 2016年12月15日 11:56

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。