1

ここに画像の説明を入力

スクリーンショットに示されている画面を実現しようとしています。しかし、要素間のスペースを制御できません。レスポンシブにしたいのですが、今回は高解像度の画面レイアウトを管理できないと思います。コードは以下のとおりで、画面のワイヤーフレームを追加しました。prepend を使用していくつかの要素を追加すると、常に私の deams が台無しになります :)

ファイルへのリンク: jsfiddle.net/AmhHf

![<div class="container-fluid">
  <div class="row-fluid">
    <div class="span8">
      <h1>Formulate</h1>
    </div>
    <div class="span4 pull-right">&nbsp;</div>
  </div>
  <div class="row-fluid">
    <form class="well span12">
      <div class="row-fluid">
        <div class="span12">
          <label>Formula Name</label>
          <input type="text" class="span8"> 
        </div>
        <div class="span8">&nbsp;</div>
      </div>
      <div class="row-fluid">
        <div class="span3">
          <label>My Label</label>
        </div>
        <div class="span3">
          <div class="input-prepend">
            <span class="add-on">@</span>
            <input type="text" class="input-medium"> 
          </div>
        </div>
        <div class="span3">+</div>
        <div class="span3">
          <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
        </div>
      </div>
      <div class="row-fluid">
        <div class="span3">
          <label>My Label</label>
        </div>
        <div class="span3">
          <div class="input-prepend">
            <span class="add-on">@</span>
            <input type="text" class="input-medium"> 
          </div>
        </div>
        <div class="span3">+</div>
        <div class="span3">
          <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
        </div>
      </div>
      <div class="row-fluid">
        <div class="span3">
          <label>My Label</label>
        </div>
        <div class="span3">
          <div class="input-prepend">
            <span class="add-on">@</span>
            <input type="text" class="input-medium"> 
          </div>
        </div>
        <div class="span3">+</div>
        <div class="span3">
          <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
        </div>
      </div>
      <div class="row-fluid"></div>
      <div class="row-fluid">
        <div class="span3">
          <label>My Label</label>
        </div>
        <div class="span3">
          <div class="input-prepend">
            <span class="add-on">@</span>
            <input type="text" class="input-medium"> 
          </div>
        </div>
        <div class="span3">+</div>
        <div class="span3">
          <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
        </div>
      </div>
      <div class="row-fluid">
        <div class="form-actions pull-right">
          <button type="submit" class="btn btn-primary">Submit</button>
          <input type="reset" class="btn" value="Reset"> 
        </div>
      </div>
    </form>
  </div>
</div>][3]

編集：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagetitle</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
4

1 に答える 1

2

これは、v3 で解決されるブートストラップのバグに関連しているようです。

そのリンクのコメントの 1 つに従って、今のところ、この jQuery スニペットを使用して問題を解決できます。

jQuery(function($) {
  $(window).resize(function() {
    $(".input-prepend, .input-append").each(function(index, group) {
      var input = $("input", group).css('width', '');
      $(".add-on, .btn", group).each(function() {
        input.css('width', '-=' + $(this).outerWidth());
      });
    });
  }).trigger('resize');
});

入力のクラスを に変更することをお勧めしますinput-block-level。

<div class="row-fluid">
  <div class="span3">
    <label>My Label</label>
  </div>
  <div class="span3">
    <div class="input-prepend">
        <span class="add-on">@</span>
        <input type="text" class="input-block-level"/> 
    </div>
  </div>
  <div class="span3">+</div>
  <div class="span3">
    <select class="input-block-level">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

この更新された jsfiddleと、入力の最初の行が正しくサイズ変更される方法を参照してください。

于 2013-04-10T19:11:43.927 に答える