Question

在网站设计中，我想要一个使用Bootstrap的自定义导航栏。我没有将导航栏保持在顶部，而是从顶部保留52px的边距并使用相同的bootstrap导航条代码，如下所示：

<div class="container main-wrapper">
      <div class="navbar-wrapper">
        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dropdwon" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="dropdwon">

              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </div>
    </div>

main-wrapper 类背后的代码是：

.main-wrapper {
    border: 1px solid #ddd;
    -webkit-box-shadow: 3px 4px 13px 4px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 3px 4px 13px 4px rgba(50, 50, 50, 0.75);
    box-shadow: 3px 4px 13px 4px rgba(50, 50, 50, 0.75);

    background-color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

但问题是：我的导航栏没有使用bootstrap 容器类的全宽度。它从左侧和右侧留下一些宽度。让我们检查一下我的问题的图像：

有谁能告诉我如何解决这个问题？

Answer 1

这是由于main-wrapper中的容器类。将container更改为container-fluid中的main-wrapper。导航栏周围的空格是默认填充：每当你添加容器时都会有15px。

添加.main-wrapper { padding: 0px; }

这是您的工作代码：http://codepen.io/SESN/pen/Mejyrx

Answer 2

试试这个

主div上的

padding: 0px类（使用包装类）使其使用文档的全宽。

.main-wrapper中的

Option Explicit Private Sub CommandButton24_Click() Dim olApp As Object 'Application Dim olTaskItem As Object 'TaskItem Dim olRecip As Object 'Recipient Dim olAddList As Object 'AddressList Set olApp = GetObject(, "Outlook.Application") Set olAddList = olApp.Session.AddressLists.Item("Global Address List") Set olTaskItem = olApp.CreateItem(3) Dim i As Long For i = 1 To Range("A" & Rows.Count).End(xlUp).Row olTaskItem.Assign Set olRecip = olTaskItem.Recipients.Add(Cells(i, 1).Value) olRecip.Resolve If olRecip.Resolved Then Cells(i, 2).Value = olAddList.AddressEntries(olRecip.AddressEntry.Name).GetExchangeUser.PrimarySmtpAddress Else MsgBox "Couldn't find Employee" End If Next i End Sub使其使用其父容器的全宽

http://blog.sherifmansour.com/?p=207

如何在内容中使用Bootstrap容器类的全部宽度？

2 个答案: