在不影响移动设备样式的情况下调整 bootstrap 3 header 项的大小

Question

我已经通过在 style.css 中添加边距和填充来更改默认 bootstrap 样式，但我希望导航位于左角而不是中间 header 当我将浏览器屏幕调整为移动尺寸时。我该怎么做？

这是我的 index.html:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Responsive Project (Prototype)</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href="style.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <header class="mainHeader">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!--HEADER-->
                <div class="navbar-header">
                    <a class="navbar-brand">A.M.®</a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!--BODY-->
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Work Positions</a></li>
                        <li><a href="#">Contacts</a></li>
                    </ul>

                    <!--USER OPTIONS-->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-user"> Sign Up</span></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"> Register</span></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</body>
</html>

style.css:

body {
    background-color: #f2f2f2;
}

.navbar-default {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar-nav {
    margin-left: 150px;
    font-weight: 600;
}

.navbar-header {
    padding-left: 150px;
}

Answer 1

您可以使用媒体查询将您的样式仅应用于较大的屏幕，如下所示：

body {
    background-color: #f2f2f2;
}

.navbar-default {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar-nav {
    font-weight: 600;
}

@media (min-width: 768px) {
    .navbar-nav {
        margin-left: 150px;
    }

    .navbar-header {
        padding-left: 150px;
    }
}

在不影响移动设备样式的情况下调整 bootstrap 3 header 项的大小

Resizing the bootstrap 3 header items without affecting the style for mobile devices

html

css

resize

responsive-design

twitter-bootstrap-3