Поместите два деления рядом друг с другом (отзывчиво) в Bootstrap

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 с отзывчивой полосой в сторону, я использую все классы и распоряжение предоставляется bootstrap, без пользовательского кода

.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>