在 Bootstrap 中將兩個 div 並排放置（響應式）

Question

我正在嘗試為約會制作一個儀表板，我希望它是這樣的：

這張圖的代碼問題是右邊的框沒有響應。 我知道為什么會這樣（我使用了margin:left ），但我不知道如何解決這個問題。 任何人都可以幫助我嗎？ 這是我的代碼：

<div style="height: 93vh">
  <div class="container-fluid w100 h-100 mt-5">
    <div class="row">
      <nav style="position: fixed;" class="col-md-2 pt-5 sidebar h-100 w100"> ... </nav>
      <div class="col mt-2" style="margin-left: 217px;">
        <main role='main' class='col-md-12 ml-0 ' style='width: 100;background: white;'> ....

我還沒有在div的表中添加類。

Answer 1

您可以使用純 CSS 和 HTML 輕松實現這一點，我使用了 float:left 和 float:right。 左列是設定寬度，但右列的寬度將根據窗口寬度計算。

 #toolbar { width: 100%; height: 50px; background-color: black; color: white; /* font color */ } #left { background-color: gray; height: 93vh; width: 150px; float: left; } #right { float: center; height: 93vh; width: calc(100%-300px); background-color: cream; }

 <div id="toolbar"> Hello World </div> <div id="container"> <div id="left" > menu </div> <div id="right"> <p> Lorem ipsum dolor sit amet, at ludus praesent cum, ne falli commodo suavitate sea. Augue erant no vim. Sea ex posse blandit mediocritatem. Nec ut laudem audiam qualisque, id sea sale legimus eligendi, iusto persequeris contentiones no sed. Ei prima suscipit mea. </p> </div> </div>

https://jsfiddle.net/s2103daq/3/

Answer 2

歡迎來到 SO！

關於我們如何使用響應式側邊欄制作側邊nav一般概念，我使用所有類和由引導程序重新提供的支柱，沒有自定義代碼

 .sidebar .dropdown-toggle { width: 100%; } .sidebar .dropdown-menu { width: 100%; } @media (min-width: 768px) { .sidebar.sidebar-sm .dropdown-toggle { display: none; } .sidebar.sidebar-sm .dropdown-menu { border-width: 0px; box-shadow: none; display: block; position: relative; width: 100%; z-index: 0; } .sidebar.sidebar-sm .dropdown-menu .dropdown-header { font-size: 16px; font-weight: 600; padding: 15px 10px 10px; } .sidebar.sidebar-sm .dropdown-menu .dropdown-header:first-child { padding-top: 0px; } .sidebar.sidebar-sm .dropdown-menu .divider { display: none; } .sidebar.sidebar-sm .dropdown-menu li a { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } .sidebar.sidebar-sm .dropdown-menu li a:focus, .sidebar.sidebar-sm .dropdown-menu li a:hover { color: #555; text-decoration: none; background-color: #f5f5f5; } .sidebar.sidebar-sm .dropdown-menu li a:focus, .sidebar.sidebar-sm .dropdown-menu li a:hover { color: #555; text-decoration: none; background-color: #f5f5f5; } .sidebar.sidebar-sm .dropdown-menu li.active a, .sidebar.sidebar-sm .dropdown-menu li.active a:focus, .sidebar.sidebar-sm .dropdown-menu li.active a:hover { z-index: 2; color: #fff; background-color: #337ab7; border-color: #337ab7; } } @media (min-width: 992px) { .sidebar.sidebar-md .dropdown-toggle { display: none; } .sidebar.sidebar-md .dropdown-menu { border-width: 0px; box-shadow: none; display: block; position: relative; width: 100%; z-index: 0; } .sidebar.sidebar-md .dropdown-menu .dropdown-header { font-size: 16px; font-weight: 600; padding: 15px 10px 10px; } .sidebar.sidebar-md .dropdown-menu .dropdown-header:first-child { padding-top: 0px; } .sidebar.sidebar-md .dropdown-menu .divider { display: none; } .sidebar.sidebar-md .dropdown-menu li a { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } .sidebar.sidebar-md .dropdown-menu li a:focus, .sidebar.sidebar-md .dropdown-menu li a:hover { color: #555; text-decoration: none; background-color: #f5f5f5; } .sidebar.sidebar-md .dropdown-menu li a:focus, .sidebar.sidebar-md .dropdown-menu li a:hover { color: #555; text-decoration: none; background-color: #f5f5f5; } .sidebar.sidebar-md .dropdown-menu li.active a, .sidebar.sidebar-md .dropdown-menu li.active a:focus, .sidebar.sidebar-md .dropdown-menu li.active a:hover { z-index: 2; color: #fff; background-color: #337ab7; border-color: #337ab7; } } @media (min-width: 1200px) { .sidebar.sidebar-lg .dropdown-toggle { display: none; } .sidebar.sidebar-lg .dropdown-menu { border-width: 0px; box-shadow: none; display: block; position: relative; width: 100%; z-index: 0; } .sidebar.sidebar-lg .dropdown-menu .dropdown-header { font-size: 16px; font-weight: 600; padding: 15px 10px 10px; } .sidebar.sidebar-lg .dropdown-menu .dropdown-header:first-child { padding-top: 0px; } .sidebar.sidebar-lg .dropdown-menu .divider { display: none; } .sidebar.sidebar-lg .dropdown-menu li a { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } .sidebar.sidebar-lg .dropdown-menu li a:focus, .sidebar.sidebar-lg .dropdown-menu li a:hover { color: #555; text-decoration: none; background-color: #f5f5f5; } .sidebar.sidebar-lg .dropdown-menu li a:focus, .sidebar.sidebar-lg .dropdown-menu li a:hover { color: #555; text-decoration: none; background-color: #f5f5f5; } .sidebar.sidebar-lg .dropdown-menu li.active a, .sidebar.sidebar-lg .dropdown-menu li.active a:focus, .sidebar.sidebar-lg .dropdown-menu li.active a:hover { z-index: 2; color: #fff; background-color: #337ab7; border-color: #337ab7; } }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <header> <nav class="navbar navbar-default"> <div class="container"> <!-- 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="#bs-example-navbar-collapse-1" 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="#">🍕</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </header> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="dropdown sidebar sidebar-md"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header">Job Type</li> <li class="active"><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li class="dropdown-header">Specialism</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li class="dropdown-header">Sample</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="col-sm-9"> <p>Move the needle inclusive improve the world white paper uplift co-create NGO thought provoking strengthening infrastructure. Leverage external partners move the needle energize save the world changemaker shared unit of analysis our work communities. Capacity building save the world shine commitment; deep dive low-hanging fruit innovate, indicators thought leader co-create because disrupt game-changer.</p> <p>Energize; energize global, social entrepreneurship social entrepreneur. Outcomes citizen-centered empathetic boots on the ground design thinking thought partnership but leverage co-creation save the world. Mobilize, communities; when movements, scale and impact scale and impact; agile then thought partnership state of play support. Capacity building empower communities, engaging social intrapreneurship, natural resources triple bottom line thought leadership or design thinking.</p> <p>Sustainable venture philanthropy; impact design thinking academic, families program area social impact thought partnership justice incubator gender rights milestones. Radical a her body her rights; storytelling our work equal opportunity resilient green space inspiring thought partnership parse. Indicators compelling outcomes entrepreneur, milestones, global low-hanging fruit targeted external partners thought leader overcome injustice challenges and opportunities. Justice radical move the needle scale and impact communities greenwashing. A, silo revolutionary strategize empower communities inspiring shine, improve the world strategize. Leverage; social enterprise, LGBTQ+, incubator shine inspiring parse game-changer systems thinking inclusion.</p> <p>Move the needle inclusive improve the world white paper uplift co-create NGO thought provoking strengthening infrastructure. Leverage external partners move the needle energize save the world changemaker shared unit of analysis our work communities. Capacity building save the world shine commitment; deep dive low-hanging fruit innovate, indicators thought leader co-create because disrupt game-changer.</p> <p>Energize; energize global, social entrepreneurship social entrepreneur. Outcomes citizen-centered empathetic boots on the ground design thinking thought partnership but leverage co-creation save the world. Mobilize, communities; when movements, scale and impact scale and impact; agile then thought partnership state of play support. Capacity building empower communities, engaging social intrapreneurship, natural resources triple bottom line thought leadership or design thinking.</p> <p>Sustainable venture philanthropy; impact design thinking academic, families program area social impact thought partnership justice incubator gender rights milestones. Radical a her body her rights; storytelling our work equal opportunity resilient green space inspiring thought partnership parse. Indicators compelling outcomes entrepreneur, milestones, global low-hanging fruit targeted external partners thought leader overcome injustice challenges and opportunities. Justice radical move the needle scale and impact communities greenwashing. A, silo revolutionary strategize empower communities inspiring shine, improve the world strategize. Leverage; social enterprise, LGBTQ+, incubator shine inspiring parse game-changer systems thinking inclusion.</p> </div> </div> </div>