Question

我是bootstrap的新手，并开始关注他们的文档。与此同时，我也开始编写一个Web应用程序，并继续使用chrome的开发人员工具检查响应性。我使用了他们的按钮组件并开始测试响应性。

<button type="button" class="btn btn-outline-primary"><i class="fa fa-sign-in" aria-hidden="true"></i>SIGN IN</button>

此行也位于head标记

中

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

但我无法通过此按钮获得响应。以下几篇文章似乎我可以使用媒体查询来实现，我必须为每个屏幕分配组件尺寸引导程序是否提供对其所有组件或实用程序的响应？如果没有，那么我必须编写媒体查询的那些组件或实用程序。如果是，那我在这里错过了什么吗？这是正常观点

你可以看到有一个侧边栏。虽然测试它看起来像是

现在隐藏侧边栏。
psst！这是固定的导航栏 代码：

<nav class="navbar fixed-top navbar-expand">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
                <li class="nav-item active">
                    <button type="button" class="btn btn-outline-primary"><i class="fa fa-sign-in" aria-hidden="true"></i>Sign In</button>
                </li>
                <li class="nav-item">
                    <button type="button" class="btn btn-outline-secondary"><i class="fa fa-registered" aria-hidden="true"></i>Register a property</button>
                </li>
                <li class="nav-item">
                    <img src="img/sidebar.png" class="img-fluid" alt="Sidebar navigation">
                </li>
            </ul>
        </div>
    </nav>

Answer 1

如果您希望它在屏幕缩小时缩小，请使用百分比值设置其宽度或vw

例如，如果按钮位于宽度为100％的div中，并且将其设置为20％宽度，则占据屏幕的1/5。

div{
  width: 100%;
}

div .btn{
 width: 20%
}

<div>
  <button type="button" class="btn btn-outline-primary"><i class="fa fa-sign-in" aria-hidden="true"></i>SIGN IN</button>
</div>

这与材质引导程序无关，这只是基本的CSS。

然而，

Bootstrap确实provide a grid system and built-in breakpoints to help with responsive design

物质引导程序是否提供对所有组件或实用程序的响应？

1 个答案: