Question

我正在尝试创建一个具有更大可点击区域的下拉菜单。任何时候我在下拉菜单中单击但在复选框之外菜单关闭。如何更改引导代码以进行调整？我无法找到定位线来调整它。

＆＃13;

{{1}}

＆＃13;

Answer 1

尝试在.form-check-label和.form-check-input中添加一些额外的填充，这些填充都应该是可点击的。

Answer 2

我已将宽度级别100添加到.btn-group和.dropdown-menu类以实现此目的。它不适用于其他课程。再次在标签中，我添加了一些样式以显示边框的工作原理。

为了防止关闭点击下拉列表，我已经包含了一个要停止的脚本 停止传播

int main(){

    sf::RenderWindow window(sf::VideoMode(800, 720), "SFML window");

    sf::Event event;

    //Rectangle to be drawn on the screen
    sf::RectangleShape someRect;
    someRect.setFillColor(sf::Color(0, 0, 0));
    someRect.setSize({ 5, 5 });
    someRect.setPosition(100, 120);

    while (window.isOpen())
    {
            if (!windowStarted) {
                    event.type = sf::Event::Closed;
            }

            while (window.pollEvent(event))
            {
                    // Close window: exit
                    if (event.type == sf::Event::Closed) {
                            window.close();
                    }

                    if (event.type == sf::Event::MouseButtonPressed) {
                            someRect.setPosition(window.mapPixelToCoords(sf::Mouse::getPosition(window)));
                    }
            }

            window.clear(sf::Color(255, 255, 255));

            window.draw(someRect);

            window.display();

    }

     return 0;
}

$('.dropdown-menu').click(function(e) {
  e.stopPropagation();
});

.btn-group,
.dropdown-menu {
  width: 100%;
}

label {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 0 0 10px;
  display: block;
  width: 100%;
}

label:hover {
  background: #eee;
  cursor: pointer;
}

下拉菜单可点击区域调整

2 个答案: