Twitter bootstrap 引导4保持div'；s内联

我有一个里面有两个div的列表项。当屏幕调整大小时，我希望带有复选标记的div保持在左侧。当前，当屏幕对于两个div都太小时，它们会叠加

<ul>
    <li class="comment">
      <div class="likeButton d-inline-block align-top">CHECKBOX</div>

      <div class="d-inline-block">
        <div>
            <small>Username - Date</small>
        </div>
        <div class="commentContent">
            This is where the comment goes
        </div>
      </div>
    </li>   
</ul>

复选框
用户名-日期
这就是评论的方向

我最初的想法是d-inline-block或d-inline就足够了，但事实并非如此

---

示例：

您只需减小宽度，您的div就可以正确安装

<li class="comment" data-userid="{{ comment.id }}" style="width: 100%;">
      <div class="likeButton d-inline-block align-top">CHECKBOX</div>
          <div class="d-inline-block" style="width: 78%;/* float: left; */">
          <div>
              <small>Username - Date</small>
          </div>
          <div class="commentContent">asdasdasd</div>
      </div>
</li>

---

我最后只是做了个家长节目

position:relative; 

并使复选框div

position: absolute;  
left:0;

然后我在剩下的那个div上加了一个左边的填充物

---

更新的bootly:

那么，您希望文本

收缩屏幕直到此注释换行-收缩屏幕直到此注释换行，对吗？您需要设置其宽度变量。我希望具有复选框的div保持在左侧是，但我只知道如何减少
。我会尽量做到这一点，我会在这里发布，只需1分钟。我继续做了你的更改，但现在如果评论很短，那么同样的事情也会发生。我用您的更改更新了bootly。我在想，也许只需要将复选标记div的位置固定，并将父对象设置为相对对象，使其始终保持在那里。我现在会试试，除非你有什么要添加的。你只需要将容器样式更改为100%。我将编辑我的代码。这都是关于宽度的。由于宽度的原因，这些div正在重新排列。好的，我知道它在绝对位置上运行得很好，但您的方式似乎更合适，所以我将尝试使用绝对位置
或固定位置
不是好的做法。您仅在某些特定情况下使用这些属性。如果我的回答对你有帮助或者是正确的，请给它打分。
position: absolute;  
left:0;