Question

我对CSS中的项目对齐有疑问。我想要两个内联表单。不幸的是，它们对于小尺寸的屏幕似乎有些偏离。有某种重叠。有没有办法解决这个问题，或者这是小屏幕的预期行为？我正在使用Bootstrap 4.1。

<div class="d-flex shadow-lg p-3 rounded">
    <form id="sendMessageForm" class="form-inline flex-grow-1">
        <div class="form-group w-100">
            <div class="input-group w-100 m-2">
                <input type="text" id="message-input" class="form-control mr-1">
                <button id="send" class="btn btn-default btn-primary" type="submit">Send</button>
            </div>
        </div>
    </form>
    <form method="POST" class="form-inline" enctype="multipart/form-data" id="upload-file" action="/upload_file">
        <label for="file-input">
            <a class="btn btn-primary"><i class="fas fa-file text-white"></i></a>
        </label>
        <input id="file-input" type="file" name="file" hidden/>
    </form>
</div>

以下是上面代码的结果： https://imgur.com/a/LX2X2pq

Answer 1

我修复了。

我做错了一些事情： 1.我没有正确使用 form-inline 类。它用于在表单中包含内联元素。 2.我在第一个表格的内部div上有一个 m-2 类。这是重叠而不是内联的主要因素。

我将在下面发布固定代码：

<div class="d-flex flex-row shadow-lg p-3 rounded">
    <form class="flex-grow-1" id="sendMessageForm">
        <div class="form-group w-100">
            <div class="input-group w-100">
                <input type="text" id="message-input" class="form-control mr-1">
                <button id="send" class="btn btn-default btn-primary" type="submit" >Send</button>
            </div>
        </div>
    </form>
    <form method="POST" class="ml-1" enctype="multipart/form-data" id="upload-file" action="/upload_file/">
        <label for="file-input">
            <a class="btn btn-primary"><i class="fas fa-file text-white"></i></a>
        </label>
        <input id="file-input" type="file" name="file" hidden/>
    </form>
</div>

这是最终结果：https://imgur.com/a/qONdHkZ

对于较小的屏幕尺寸，内联元素不是内联的

1 个答案: