如何控制 HTML 容器标签的间距/缩进?

尼克·T

我正在使用引导导航栏,并将导航栏的内容放入容器中。对于容器,导航栏的缩进(因为没有更好的术语)对我来说有点太宽了。有没有办法缩短缩进并使导航栏的内容更接近浏览器的边缘(通过 HTML 或 CSS)?

查看代码可能没有用,但这里是:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">
                        Dropdown
                    </a>
                    <div aria-labelledby="navbarDropdown" class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>
马扎迪布

看起来你需要.container-fluid而不是.container文档

将 .container-fluid 用于全宽容器,跨越视口的整个宽度。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">
                        Dropdown
                    </a>
          <div aria-labelledby="navbarDropdown" class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

PS:您可能不需要.containerdiv。只是在这里尝试没有它:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">
                        Dropdown
                    </a>
        <div aria-labelledby="navbarDropdown" class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Symfony控制台中解释HTML标签?

来自分类Dev

HTML BR标签控制

来自分类Dev

2013年的HTML电子邮件:如何控制段落和图像等元素之间的间距?

来自分类Dev

HTML / CSS如何将列表连接到h标签和单词间距

来自分类Dev

如何从非控制台选项卡隐藏firebug的底部控制台?例如,在HTML标签下隐藏控制台

来自分类Dev

Perl正则表达式:如何用html标签替换终端控制字符?

来自分类Dev

Perl正则表达式:如何用html标签替换终端控制字符?

来自分类Dev

(RUBY)如何读取HTML标签内容并在控制台中打印它们

来自分类Dev

如何使用HTML或CSS缩进

来自分类Dev

如何缩进HTML代码示例

来自分类Dev

如何使用VBA缩进HTML?

来自分类Dev

如何使用HTML或CSS缩进

来自分类Dev

控制R中的饼形标签的间距?

来自分类Dev

缩进html select标签上的文本

来自分类Dev

控制标签位置以正确缩进输出

来自分类Dev

如何在组图之间创建组之间的间距并控制轴标签的大小?

来自分类Dev

如何控制堆积条形图中x轴标签位置的间距?

来自分类Dev

如何替换HTML标签?

来自分类Dev

如何匹配html标签

来自分类Dev

R如何控制色条/图例的间距

来自分类Dev

R如何控制颜色条/图例的间距

来自分类Dev

如何简单地控制文本之间的间距

来自分类Dev

如何控制段落元素之间的间距?

来自分类Dev

如何控制导航栏间距?

来自分类Dev

html-如何控制元素放置

来自分类Dev

HTML TIDY无法正确缩进内联标签和脚本标签

来自分类Dev

如何摆脱HTML页面上的幻像间距?

来自分类Dev

如何解决这个 HTML 间距问题?

来自分类Dev

PhpStorm:如何分隔PHP和HTML缩进

Related 相关文章

热门标签

归档