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

  <form class="form-inline d-inline">

    <p class="form-group d-inline ">

      1. elit at imperdiet dui accumsan

      <input type="text" class="form-control mx-2" id="textInput" placeholder="Fill the gap"> sit amet nulla facilisi morbi tempus iaculis urna id volutpat.

    </p>

  </form>

</div>

Answer 2

如果我误解了您，我深表歉意。我的母语不是英语。但是，我意识到您想将生产安排成一行？

.ok {

    display: flex;

}

.ok div {

    white-space: nowrap;

}

<div class="ok">

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

  <div class="form-group">

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

  </div>

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

</div>