Question

我正在尝试构建一个下拉菜单，其中包含一系列文章，其中包含作者旁边的图片。最初，我打算使用Bootstrap 4＆＃34; card＆＃34;系统，但卡上的图片只能在顶部或底部，所以我在下拉列表中使用常规div元素。但是，通过Bootstrap的下拉菜单默认CSS并没有包含我应该的虚构文章标题的长度。

见下图。

标题元素位于下拉菜单div中，因此我不确定发生了什么。除了默认Bootstrap 4 CSS之外的悬停颜色更改外，没有真正的CSS。哦，我在整个菜单行周围放置了一个坚实的边框，这样我才能看到它。最终我将其删除。

这是我的HTML。

<div class="row">
            <div class="col-6" style="border: 1px solid;">
                <div class="btn-group" id="newsbtn">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-newspaper-o" aria-hidden="true" style="color: white;"> Latest News & articles</i>
                    </button>
                    <div class="dropdown-menu">
                          <a class="dropdown-item item-list" href="#">
                            <div class="row">
                                <div class="col-sm-4 col-xs-4 no-padding photobox">
                                    <div class="add-image">
                                        <img class="img-thumbnail no-margin" src="1.jpg"
                                             alt="img">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <h6>The most popular 80s pedals on Reverb</h6>
                                    <span class="row pl-3">Johnna B. Goode</span>
                                    <span class="info-row text-muted">
                                        <span class="date">
                                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                                            <small> Today 9:20 am</small>
                                        </span>
                                    </span>
                                </div>
                            </div>
                          </a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">
                            <div class="row">
                                <div class="col-sm-4 col-xs-4 no-padding photobox">
                                    <div class="add-image">
                                        <img class="img-thumbnail no-margin" src="10.jpg"
                                             alt="img">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <p>Gibson vs. Epiphone: The Sound Matters</p>
                                    <span class="row pl-3">Damon Wayne</span>
                                    <span class="info-row text-muted">
                                        <span class="date">
                                            <i class="fa fa-clock-o" aria-hidden="true"></i> 
                                            <small> Yesterday</small>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Article 3</a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a href="#" class="btn btn-block" id="viewallbtn">View all articles</a>
                    </div>
                </div>
            </div>

Answer 1

哟必须apply display:inline-block;到您下拉菜单的所有内部元素。

你应该考虑使用一个单独的CSS文件，它更容易处理。

css应包含以下内容：

＆＃13;

.dropdown-menu div
{
  display:inline-block;
}

＆＃13;

这将适用于下拉菜单中的每个div。

如果下拉列表中的元素出现意外情况，您可以使用此元素使每个元素保持在同一行：

＆＃13;

.dropdown-menu div {
   clear:both;
   float:left;
}

＆＃13;

Answer 2

试试这个css，

.dropdown-menu .dropdown-item {
    white-space: normal;
}

下拉列表的边框没有环绕我的标题

2 个答案: