Question

我试图将我的css模板从Bootstrap3.x升级到Bootstrap 4

我注意到在新版本中，导航栏菜单有3个折断点选项，

function setComments($conn) {
    if (isset($_POST['commentSubmit'])) {
        $id = $_POST['postid'];
        $uid = $_POST['uid'];
        $date = $_POST['date'];
        $message = $_POST['message'];


        $sql = "INSERT INTO comments (post_id, uid, date, message) VALUES (?, ?, ?, ?)";
        $stmt = mysqli_prepare($sql);
        mysqli_stmt_bind_param($stmt, "iiss", $id, $uid, $date, $message);
        $result = mysqli_stmt_execute($stmt);
    }
}

在B3版本中，我们可以通过css修改样式来手动更改宽度像素。

任何人都知道如何改变Bootstrap4中的突破点？

Answer 1

您可以使用navbar-toggleable-*类更改Bootstrap 4导航栏断点。

示例：https://www.codeply.com/go/GVsytKbMkV

或者，如果您尝试使用自定义断点，那么您可以尝试这样的事情：

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

示例：

改变bootstrap 4导航栏断点

1 个答案: