Bootstrap：让文本在文本输入字段周围流动

Question

我想用引导程序创建一个“填补空白”界面，用户必须在其中键入缺少的单词才能完成一个句子。

如何定位文本输入的内联并使其余的句子在文本周围流动？

到目前为止，这是我的代码：

elit at imperdiet dui accumsan <form class="form-inline">

  <div class="form-group">

    <input type="text" class="form-control" id="textInput" placeholder="...">

  </div>

</form> sit amet nulla facilisi morbi tempus iaculis urna id volutpat

这是它的外观（用换行符括起来的文本输入）：

这是小提琴：https : //jsfiddle.net/f58hzou3/

Answer 1

我为您有此解决方案。将所有文本放在.form-group班级中。我必须.d-inline为.form-inline＆.form-groupclass都放置其他类，以内联显示文本。希望它能为您服务。别忘了在Codepen上遵循我的示例<div class="col-md-6">&nbsp; <form class="form-inline d-inline">&nbsp; &nbsp; <p class="form-group d-inline ">&nbsp; &nbsp; &nbsp; 1. elit at imperdiet dui accumsan&nbsp; &nbsp; &nbsp; <input type="text" class="form-control mx-2" id="textInput" placeholder="Fill the gap"> sit amet nulla facilisi morbi tempus iaculis urna id volutpat.&nbsp; &nbsp; </p>&nbsp; </form></div>

Answer 2

如果我误解了您，我深表歉意。我的母语不是英语。但是，我意识到您想将生产安排成一行？.ok {&nbsp; &nbsp; display: flex;}.ok div {&nbsp; &nbsp; white-space: nowrap;}<div class="ok"><div>elit at imperdiet dui accumsan</div> <form class="form-inline">&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="text" class="form-control" id="textInput" placeholder="...">&nbsp; </div></form><div>sit amet nulla facilisi morbi tempus iaculis urna id volutpat</div></div>