Question

我有一个里面有2个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就够了，但它没有。

例如：http://www.bootply.com/ZVPZFTKJ4A

Answer 1

你只需要减小宽度，然后你的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>

CSS：

.commentContent {
    white-space: normal;
    word-wrap:break-word;
    word-break: break-all;
    width: 100%
}

Answer 2

我最终只是做了父div

POST /api/v3/orders HTTP/1.1
Host: api.beta.website.com
Authorization: Basic TG9vayBhdCB0aGF0OyBEdWNrcy4uLm9uIGEgbGFrZSEK

并制作了复选框div

position:relative;

然后我在剩下的div上扔了一个左边的填充。

更新了bootly：http://www.bootply.com/lfRCJKCMi6

Bootstrap 4保持div的内联

2 个答案: