Question

因此，我正在为学校创建一个练习，以便教师可以填写一个表格，为学生进行练习。现在我正在尝试使用引导列来使事情看起来更好，更容易理解我将采用这种格式：

SELECT1 - QUESTION

SELECT2

现在我想我可以通过给SELECT1一个col-md-3，QUESTION一个col-md-7和SELECT2一个col-md-10来实现这个目的，它也为它们显示的内容提供了适当的长度。现在由于某种原因，它将它们垂直堆叠，同时为它们给定的cols提供适当的长度。如果我将SELECT2缩短为例如像SELECT1一样的col-md-3，它会使QUESTION和SELECT2放在同一行上。我尝试将它们放在类形式内联的表单中，但不知何故使它像这样：

问题 - SELECT1

SELECT2

这对我来说更不合理。我应该注意到这一切都在一个类的内部，该类具有左右10px填充的样式，它位于容器内的面板面板体内。

以下是相关的HTML代码，它们只是垂直堆叠：

<span id="spanid">
 <div class="form-group input-group col-md-3">
  <select class="form-control">
   <option disabled="" selected="">Choose</option> 
   <option>Option 1</option>
   <option>Option 2</option>
  </select>
 </div>
 <div class="well well-sm col-md-7">
  <h5 id="eQuestion">A question</h5>
 </div>
 <div class="form-group input-group col-md-10">
  <select class="form-control">
   <option disabled="" selected="">Choose the correct answer</option>
   <option>Option 1</option>
   <option>Option 2</option>
</span>

TL; DR：为了达到建议的目的，我如何修复我的代码以使我的页面看起来像这样：

SELECT1 - QUESTION

SELECT2

编辑新代码：

<span id="vqaspan" class="row">
 <div class="form-group col-md-3">
  <select class="form-control">
   <option disabled="" selected="">Choose</option>
  </select>
 </div>
 <div class="well well-sm col-md-7">
  <h5 id="eQuestion">Question</h5>
 </div><div class="form-group col-md-10">
 <select class="form-control">
  <option disabled="" selected="">Choose</option>
</span>

这给了我：

SELECT2

SELECT1 - QUESTION

我不明白为什么现在将SELECT2置于其余部分

之上

Answer 1

由于类input-group的属性，所有元素都进入堆栈。您可以删除它以使其按照您的设计要求工作。

<span id="spanid">
 <div class="form-group col-md-3">
  <select class="form-control">
   <option disabled="" selected="">Choose</option> 
   <option>Option 1</option>
   <option>Option 2</option>
  </select>
 </div>
 <div class="well well-sm col-md-7">
  <h5 id="eQuestion">A question</h5>
 </div>
 <div class="form-group  col-md-10">
  <select class="form-control">
   <option disabled="" selected="">Choose the correct answer</option>
   <option>Option 1</option>
   <option>Option 2</option>
  </select>
 </div>
</span>

由于您使用col-md-3列网格仅适用于中等级别设备

根据你在代码中的修改。这在我的最后工作得很好。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<span id="vqaspan" class="row">
 <div class="form-group col-md-3">
  <select class="form-control">
   <option disabled="" selected="">Choose1</option>
  </select>
 </div>
 <div class="well well-sm col-md-7">
  <h5 id="eQuestion">Question</h5>
 </div>
 <div class="form-group col-md-10">
 <select class="form-control">
  <option disabled="" selected="">Choose2</option>
  </select>
  </div>
</span>

它会产生意想不到的行为，因为你可能错过了最后关闭select和div。

Answer 2

我知道你特意在这里询问引导程序，但是如果我可以沉迷于“你应该使用它”，那么如何使用纯HTML功能（flexbox）呢？这种情况就是这样的（事实上，bootstrap 4现在是用flexbox构建的），正如你所看到的那样，它实际上比bootstrap更难以正确使用并且接近不可读的“col-md-x”css方法。

在这个示例中，为了便于阅读，我们将[CustomEditor(typeof(BezierCurve))] public class BezierCurveEditor : Editor { private BezierCurve curve; private Transform handleTransform; private Quaternion handleRotation; private const int lineSteps = 10; private const float directionScale = 0.5f; private void OnSceneGUI () { curve = target as BezierCurve; handleTransform = curve.transform; handleRotation = Tools.pivotRotation == PivotRotation.Local ? handleTransform.rotation : Quaternion.identity; Vector3 p0 = ShowPoint(0); Vector3 p1 = ShowPoint(1); Vector3 p2 = ShowPoint(2); Vector3 p3 = ShowPoint(3); Handles.color = Color.gray; Handles.DrawLine(p0, p1); Handles.DrawLine(p2, p3); Handles.DrawBezier(p0, p3, p1, p2, Color.white, null, 2f); curve.DrawBezierCurve (); if (GUI.changed) { curve.DrawBezierCurve (); EditorUtility.SetDirty( curve ); Repaint(); } } private void ShowDirections () { Handles.color = Color.green; Vector3 point = curve.GetPoint(0f); Handles.DrawLine(point, point + curve.GetDirection(0f) * directionScale); for (int i = 1; i <= lineSteps; i++) { point = curve.GetPoint(i / (float)lineSteps); Handles.DrawLine(point, point + curve.GetDirection(i / (float)lineSteps) * directionScale); } } private Vector3 ShowPoint (int index) { Vector3 point = handleTransform.TransformPoint(curve.points[index]); EditorGUI.BeginChangeCheck(); point = Handles.DoPositionHandle(point, handleRotation); if (EditorGUI.EndChangeCheck()) { Undo.RecordObject(curve, "Move Point"); EditorUtility.SetDirty(curve); curve.points[index] = handleTransform.InverseTransformPoint(point); } return point; } }放在第一行public class BezierPair : MonoBehaviour { public GameObject bez1; public GameObject bez2; public void setupCurves() { bez1 = GameObject.Find("Bez1"); bez2 = GameObject.Find("Bez2"); } }和[CustomEditor(typeof(BezierPair))] public class BezierPairEditor : Editor { private BezierPair bezPair; public override void OnInspectorGUI() { bezPair = target as BezierPair; if (bezPair.bez1.GetComponent<BezierCurve>().points[0] != bezPair.bez2.GetComponent<BezierCurve>().points[0]) { Vector3 assignPoint0 = bezPair.bez1.GetComponent<BezierCurve>().points[0]; bezPair.bez2.GetComponent<BezierCurve>().points[0] = assignPoint0; } if (GUI.changed) { EditorUtility.SetDirty(bezPair.bez1); EditorUtility.SetDirty(bezPair.bez2); Repaint(); } } flex-grow:2上，或多或少，您想要的2/3和1/3比率：

select

flex-grow:1

Bootstrap列奇怪地行动

2 个答案: