Question

我有一个Bootstrap表单，我已经应用form-inline并在那里有几个元素。我已经读过，直到768px，元素保持内联。但我发现情况并非如此，如果我将input-lg分配给某些元素，则最后一个元素会在新行上突破，甚至超过768px。

另一种方法是使这些元素更小，直到768px。有没有办法做到这一点？

代码：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Title">
  </div>

  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Description">
  </div>
</form>

＆＃13;

Answer 1

e.preventDefault();

使用它将它们保持在768px以上的同一行。如果你想保持水平低于768px只需将“col-sm-6”类更改为“col-xs-6”，如下所示：

var q = 1;
$(document).ready(function() {
$("[id^='question']").hide();
$("#question1").show();

$("#next").click(function() {
  $("#question" + q).show();
  q = q + 1;
  if(q > 4) {
    $("#question" + (q-1)).hide();
    $("#question" + q).show();
    $("#next").remove();
    $("#f1").append("<input type='submit' value='Submit'>");
    
  } else {
    $("#question" + q).show();
    $("#question" + (q-1)).hide();
  }

  
});


$('#f1').submit(function(e){
    //var selectedOption = $('input[name=options]:checked').val();
  //if ((selectedOption == '')){
  //  e.preventDefault();
  //}
  // Check that all 5 inputs have text
  $("[id^='question']").each(function(i){
      if($(this).val() == ''){
        alert('Question ' + $(this).prop('id') + ' is empty!');
        e.preventDefault();
      }
  });
  
  });
});

Answer 2

请参阅我的更新示例：http://www.bootply.com/paPWbTuwAL

我为每个表单项添加了bootstrap列类，以便您可以更好地控制其大小调整，并添加了一些自定义CSS

希望这有帮助！

CSS

Activity

HTML

@Override
protected void onDestroy() {
    musicSrv = null;
    //unregisterReceiver(broadcastReceiver);
    super.onDestroy();
}

Answer 3

尝试使用max-width属性限制字段的宽度。
将float: left;属性添加到它们，以便它们保持在一行上。
使用overflow: hidden;属性使表单成为浮动元素的容器。

请查看结果：http://www.bootply.com/JXslxuh3qX

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.form-2-groups-on-one-line,
.form-4-groups-on-one-line {
  clear: left;
  overflow: hidden;
}
.form-2-groups-on-one-line .form-group {
  float: left;
  max-width: 50%;
}
.form-4-groups-on-one-line .form-group {
  float: left;
  max-width: 25%;
}
.form-2-groups-on-one-line input,
.form-2-groups-on-one-line select,
.form-4-groups-on-one-line input,
.form-4-groups-on-one-line select {
  max-width: 100%;
}

<form class="form-inline form-2-groups-on-one-line">
  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Title">
  </div>
  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Description">
  </div>
</form>

<form class="form-inline form-4-groups-on-one-line">
  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Title">
  </div>

  <div class="form-group">
    <select class="form-control input-lg">
      <option value="0" selected="" disabled="">Choose Assignment Type</option>
      <option value="1">Essay</option>
      <option value="18">Admission / Scholarship Essay</option>
      <option value="12">Research Paper</option>
      <option value="26">Research Proposal</option>
      <option value="4">Coursework</option>
      <option value="2">Term paper</option>
      <option value="5">Article</option>
      <option value="22">Literature / Movie review</option>
      <option value="9">Reports</option>
      <option value="3">Dissertation</option>
      <option value="29">Thesis</option>
      <option value="30">Thesis Proposal</option>
      <option value="13">Creative Writing</option>
      <option value="11">Business Plan</option>
      <option value="15">Speech / Presentation</option>
      <option value="7">Outline</option>
      <option value="14">Annotated Bibliography</option>
      <option value="6">Dissertation Proposal</option>
      <option value="17">Proofreading</option>
      <option value="25">Paraphrasing</option>
      <option value="28">PowerPoint Presentation</option>
      <option value="27">Personal Statement</option>
      <option value="24">Non-word Assignments</option>
      <option value="23">Math Assignment</option>
      <option value="21">Lab Report</option>
      <option value="20">Code</option>
      <option value="19">Case Study</option>
      <option value="16">Other types</option>
    </select>
  </div>

  <div class="form-group">
    <input type="text" class="form-control input-lg mg-up1" placeholder="Your Email Address">
  </div>

  <div class="form-group mg-up">
    <button type="submit" class="form-control input-lg">Check The Price</button>
  </div>
</form>

保持Bootstrap内联输入元素水平，直到768px？

3 个答案: