Question

如何在调整窗口大小时使导航栏不折叠/切换？我尝试添加

 private void addBtn_Click(object sender, EventArgs e)
     {


        try
        {


            dataGridView1.Rows.Add(comboBox2.Text, textBox6.Text, textBox7.Text, textBox2.Text,textBox3.Text,textBox4.Text,textBox5.Text);
            if (dataGridView1 != null)
            {

                for (int count = 0; (count <= (dataGridView1.Rows.Count - 2)); count++)
                {

                    dataGridView1.Rows[count].HeaderCell.Value = string.Format((count + 1).ToString(), "0");

                }                   

            }

到我的CSS。这样，当调整窗口大小时，导航栏元素最终堆叠。我也在使用bootstrap 4 alpha 6

这是我的导航栏代码：http://www.bootply.com/mHeWTUSxAM

Answer 1

how i did it is by giving .btn.btn-navbar{display:none;}
and by giving .nav-collapse{height:auto}
it worked like this but i believe it is not best solution 
referenced to bootstrap 4 documentation you should look into that "Responsive behaviors

Navbars可以利用.navbar-toggler，.navbar-collapse和.navbar-toggleable- *类来更改其内容在按钮后面折叠的时间。与其他实用程序结合使用，您可以轻松选择何时显示或隐藏特定元素。“

Answer 2

updated Bootply

只需使用navbar-toggleable-xl代替navbar-toggleable-md。

工作代码段

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-xl navbar-inverse bg-inverse">

  <div class="navbar-collapse collapse" id="collapsingNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#menu-toggle" class="nav-link" id="menu-toggle">Menu</a>
      </li>
    </ul>
    <ul class="navbar-nav dropdown dropdown-menu-right ml-auto">
      <li class="nav-item ">
        <a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">logged in as</a>

        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Logout</a>
          <a class="dropdown-item" href="#">My Movements</a>
        </div>
      </li>
    </ul>
  </div>

</nav>

＆＃13;

bootstrap禁用折叠/在导航栏上切换

2 个答案: