<div class="container">
<div class="row content">
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
<div class="col-sm-2" style="background-color:orange">
<div align="center" style="background-color:pink">
<img class="img-circle" src="http://placehold.it/100x100" style="padding-top:10px;">
<h3>JOHN</h3>
</div>
<div class="navbar-default" role="navigation" style="background-color:purple">
<ul class="nav" id="side-menu">
<li><a href="">Profile</a></li>
<li><a href="">Published</a></li>
<li><a href="">Bookmarked</a></li>
</ul>
</div>
</div>
<div class="col-sm-8" style="background-color:yellow">
<h3>Personal Information</h3>
<table id="personal-information" class="table" align="left">
<tbody>
<tr>
<td>Joined:</td>
<td>2018-02-10</td>
</tr>
<tr>
<td>Last Active:</td>
<td>2019-10-15 12:15:17</td>
</tr>
<tr>
<td>Gender:</td>
<td>MALE</td>
</tr>
<tr>
<td>Age:</td>
<td>26</td>
</tr>
<tr>
<td>About me:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-1 sidenav" style="background-color:blue" >
</div>
</div>
</body>
просмотр
Я вычистил это как можно больше. Я также добавил цвета к каждому элементу div, чтобы его было видно.
Я разделил свою страницу на 4. 2 из них назывались sidenavs, чтобы создать пробелы с обеих сторон для централизованного просмотра моего основного содержимого, 1 - для пользователя. Кнопки с изображением, именем и навигацией, а другая предназначена для другого контента, например личной информации, и, вероятно, добавит больше. Итак, я разделил их соответственно: 1 - 2 -8 - 1
Моя проблема в том, что я не понимаю текущее выравнивание моих столбцов, как вы можете видеть из изображения, синяя сторона, которая должна бытьна правом краю теперь внизу. Я позаботился о том, чтобы все размеры моих столбцов составляли до 12, что является максимумом, поэтому я не знаю, почему другой div перенесен в следующую строку.
PS все эти странные имена html, такие как sidenav, хотяэто не панель навигации, которая находится на стороне. И содержимое строки с уже контейнером div. Я копирую вставленный весь код HTML-страницы из бесплатного шаблона начальной загрузки (вы можете увидеть сходство, если вы скачали некоторые из них - я не очень хорошо решаю, как оформить свои страницы, поэтому я просто решил выбрать из шаблона и настроить его, однако)я хочу)