请点击展开代码段以在大屏幕上查看。
目标
我需要使带有文本的面板和下面的2个白色选项卡的长度相同。
问题
如您所见，右侧的标签比面板短。
我附上指向我的问题的图片。
body {
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
font-family: 'Roboto Condensed', sans-serif;
}
li {
list-style: none;
}
.header-container, .top-bar-container, .icons-container, .footer-container, .price-container, .profile-container, .office-container, .photos-container, .article-container, .sizes-container, .full-width-container {
max-width: 1200px;
margin: 0 auto;
}
/*Main section*/
.main {
background-color: #feeeea;
}
/*Gallery*/
.photo-modal {
cursor: pointer;
}
.photos-container {
margin-bottom: 80px;
}
.photo-element {
width: 200px;
height: 200px;
margin: 60px 30px 0 0;
/* Increase top margin to space */
border-radius: 15px;
/* padding: 15px; Not needed */
display: inline-block;
position: relative;
/* Needed to position number of likes */
}
/*Full width tabs*/
.full-width-container {
margin: 25px auto;
}
.full-width-container .col-md-6 {
width: 47%;
}
.full-width-tab {
margin: 15px;
border-radius: 15px;
overflow: hidden;
}
.full-width-tab.col-md-6 {
width: 47%;
}
.full-width-section {
padding: 30px;
background: #fff;
border-radius: 15px;
margin-bottom: 30px;
}
.tab-load label, .form-submit button {
padding: 8px 15px;
color: #fff;
text-align: center;
border-radius: 15px;
cursor: pointer;
font-weight: 400;
background: rgba(20,88,177,1);
background: -moz-linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(20,88,177,1)), color-stop(100%, rgba(13,170,220,1)));
background: -webkit-linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
background: -o-linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
background: -ms-linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
background: linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1458b1', endColorstr='#0daadc', GradientType=1 );
}
.tab-element textarea {
width: 100%;
}
.form-submit button {
padding: 8px 30px;
border: none;
outline: none;
}
.tab-element .info input {
width: 100%;
}
.user-likes {
background: #feeeea;
color: #e87193;
padding: 13px 9px;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
}
/
.tab-element .tab-load {
padding: 20px 15px 25px;
margin: 0;
}
.tab-element .tab-load p {
margin: 0;
}
/*Article New*/
.article-feed {
padding-bottom: 0;
}
.article-section .user-photo {
width: 50px;
height: 50px;
}
.article-section .user-photo img {
width: 100%;
}
.article-section .user-name {
margin: 0;
}
.article-section .user-name a {
color: #000;
font-weight: bold;
}
.article-top {
display: flex;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eaeaea;
}
.article-bottom h3 {
color: #2581bd;
font-weight: bold;
font-size: 16px;
}
.article-user-control {
margin: 0;
}
.article-user-control li {
display: inline-block;
position: relative;
margin-right: 15px;
}
.article-user-control li:after {
content: ' ';
width: 3px;
height: 3px;
position: absolute;
right: -12px;
top: 39%;
background: #bbbbbb;
}
.article-user-control li:last-child:after {
content: '';
width: 0;
height: 0;
}
.article-user-control li a {
color: #e87193;
}
.article-message-collapse.hide-collapse {
max-height: 100px;
min-height: 50px;
overflow: hidden;
}
.article-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
.article-info p {
margin: 0;
}
.article-info .data, .article-info .read-more {
font-size: 14px;
color: #bbbbbb;
}
/* Article contnet */
.panel-heading {
padding: 25px;
background-color: black;
border-radius: 15px 15px 0px 0px;
}
.panel-default>.panel-heading.content-article-header {
background-color: #FAFAFA;
background-image: none;
border-color: #FFF;
}
.content-article-title {
color: #2581bd;
font-size: 18px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
}
.panel-default {
border-style: none;
border-radius: 15px;
}
.content-article-body {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
line-height: 30px;
}
.comment-author {
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
color: #e44d7b;
font-size: 16px;
}
.comment-text {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
font-size: 14px;
}
.comment-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.comment-info p {
margin: 0;
}
.comment-info .data {
font-size: 14px;
color: #bbbbbb;
}
.author-article {
font-size: 14px;
color: #bbbbbb;
padding-right: 20px;
}
.author {
padding-top: 20px;
}
.author-data {
font-size: 14px;
color: #bbbbbb;
padding-right: 10px;
}
.article-header-icon {
width: 32px;
margin-right: 21px;
}
.article-section-author {
background: #fff;
border-radius: 15px;
margin-bottom: 30px;
}
.article-section-author .image-description {
font-size: 18px;
}
.article-section-author .tab-count{
color: #000;
text-transform: capitalize;
font-weight: 400;
font-size: 16px;
margin-bottom: 15px;
}
.article-section-author .tab-count img {
margin-right: 10px;
}
.article-section-author .description {
text-align: justify;
}
.article-section-author ul {
margin-bottom: 10px;
padding: 0;
}
.article-section-author .user-photo {
width: 50px;
height: 50px;
}
.article-section-author .user-photo img {
width: 100%;
}
.article-section-author .user-name {
margin: 0;
}
.article-section-author .user-name a {
color: #000;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="Компания TASOMA промо текст">
<meta name="author" content="Soft Group">
<title>Vikids</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Main style -->
<link href="assets/css/css-copy.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,400i,700;subset=cyrillic" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- START Main container -->
<main>
<div class="container-fluid main">
<section class="row full-width-container">
<div class="row">
<div class="col-md-12 full-width-tab">
<div class="panel panel-default">
<div class="panel-heading content-article-header">
<div class="row">
<div class="col-md-11">
</div>
<div class="col-md-1">
<div class="user-likes text-center">
<i class="fa fa-heart" aria-hidden="true"></i> 3
</div>
</div>
</div>
</div>
<div class="panel-body content-article-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</p> <br>
<p>
Cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu
</p>
</div>
</div>
</div>
</div>
<section class="row full-width-container">
<div class="col-md-6 full-width-tab">
<div class="row">
<form action="#">
<div class="col-md-12 full-width-section">
<div class="row add-comment-tab">
<div class="col-md-12 tab-element add-comment-tab">
<div class="row">
<div class="col-md-2">
<div class="user-photo">
<img src="./assets/images/users/photo.png" alt=""
>
</div>
</div>
<div class="col-md-10">
<p class="info">
<textarea> Добавить комментарий... </textarea>
</p>
</div>
</div> <!-- end row comment columns -->
</div>
</div>
<p class="form-submit text-right">
<button class="gradient">Отправить</button>
</p>
</div>
</form>
</div>
</div>
<div class="col-md-6 full-width-tab">
<div class="row">
<div class="col-md-12 full-width-section author">
<div class="col-md-12 tab-element article-feed article-section-author">
<div class="article-top">
<div class="author-article"> Автор </div>
<div class="user-photo">
<img src="./assets/images/users/marina-ivanova.png" alt="Лиза Фокина">
</div>
<div class="user-data">
<p class="user-name"><a href="#">Марина Иванова</a></p>
<ul class="article-user-control">
<li><a href="#">Добавить в друзья</a></li>
<li><a href="#">Отправить сообщение</a></li>
</ul>
</div>
</div>
<div class="article-bottom">
<div class="author">
<span class="author-data"> Дата добавления</span>
<span class="author-data-info"> 24 декабря 2017 года </span>
</div>
<div class="author">
<span class="author-data"> Комментарии </span>
<span class="author-data-info"> 3 комментария </span>
</div>
<div class="author">
<span class="author-data"> Просмотры </span>
<span class="author-data-info"> 37 просмотров </span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</div>
</main>
<!-- END Main container -->
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="https://use.fontawesome.com/ae7c834c9a.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>请帮助我解决这个问题，谢谢！
最佳答案
您在添加列，行和元素时变得很复杂，而没有考虑哪些css属性应用了引导程序，这会使页面变得混乱且难以理解。
您也犯了一些不好的习惯。
我在这里保留我的建议：
从bootsrap container类开始，将所有内容都包围起来，并设置默认宽度，或者使用自定义的wrapper类将所有身体内容包围起来。尝试仅使用主体设置整个宽度和高度，并选择设置背景或默认字体属性。
尽量简化和概括化CSS选择器，请始终注意保持其简洁明了。
使用layoutit帮助创建网格结构和页面结构。
仅在容器，包装器或列内使用行，行内使用列。
使用嵌套在同一引导程序列中的类，而不是将其添加到内部Extra div中。
如果要在移动设备中正确显示，请使用xs列开始开发，然后添加其余列。如果没有，反之亦然。例如：col-xs-12 col-sm-6 col-md-3 col-lg-2col-xs-offset-3 col-xs-7 col-sm-offset-4 col-sm-8col-lg-4 col-md-4 col-sm-6 col-xs-12
Bootstrap Documentation
在此推荐之后，我在这里给您留下了评论的代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="Компания TASOMA промо текст">
<meta name="author" content="Soft Group">
<title>Vikids</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Main style -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,400i,700;subset=cyrillic" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<!-- Simplify and generalize at the max your css selectors, "Keep it simple and clear" -->
<style type="text/css">
/*
Set full width and height to page also set body background color
*/
body, html {
width: 100%;
height: 100%;
background: #feeeea;
}
/*
Set default padding-top
*/
main {
padding-top: 5%;
}
/*
Set article header color
*/
.article-header {
background-color: #FAFAFA;
background-image: none;
border-color: #FFF;
}
/*
Set user likes properties
*/
.user-likes {
background: #feeeea;
color: #e87193;
padding: 13px 9px;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
}
/*
Set article properties and append margin bottom to separete the article to the rest of contents
*/
.article-body{
padding: 25px;
background: #fff;
font-size: 16px;
color: #333;
margin-bottom: 50px;
}
/*
Set article blocs padding, background and border
*/
.two-columns .col-lg-5, .two-columns .col-lg-6 {
padding: 25px;
background: #fff;
border-radius: 25px;
min-height: 200px;
}
/* Set extra bottom to end of page */
.two-columns {
margin-bottom: 20px;
}
/*
Textarea goes with full-width
*/
textarea {
width: 100%;
}
/*
Submit comment button
*/
.form-submit {
color: #fff;
text-align: center;
border: none;
padding: 5px 15px;
margin-top: 5px;
border-radius: 15px;
cursor: pointer;
font-weight: 400;
background: rgba(20,88,177,1);
background: -moz-linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(20,88,177,1)), color-stop(100%, rgba(13,170,220,1)));
background: -webkit-linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
background: -o-linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
background: -ms-linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
background: linear-gradient(45deg, rgba(20,88,177,1) 0%, rgba(13,170,220,1) 100%);
}
/*
Article Author
*/
.author {
color: #bbbbbb;
}
.author-top {
border-bottom: 1px solid #ccc;
display: flex;
align-items: center;
}
.author-name{
font-size: 14px;
padding-right: 15px;
}
.user-name {
margin: 0px;
}
.user-name a {
color: #000;
font-weight: bold;
}
.user-photo {
width: 50px;
height: 50px;
}
.user-control {
padding: 0;
}
.user-control ul {
margin-bottom: 10px;
padding: 0;
list-style-type: none;
}
.user-control li {
display: inline-block;
position: relative;
margin-right: 15px;
}
.user-control li:after {
content: ' ';
width: 3px;
height: 3px;
position: absolute;
right: -12px;
top: 39%;
background: #bbbbbb;
}
.user-control li:last-child:after {
content: '';
width: 0;
height: 0;
}
.user-control li a {
color: #e87193;
}
</style>
</head>
<body>
<!-- START with bootsrap container class to englobe all your content and set default content width -->
<div class="container container-fluid main">
<!-- Set main content using a row -->
<main class="row">
<!-- Nested rows needs columns, use bootstrap max column -->
<section class="col-lg-12">
<!-- Main article-->
<article>
<!-- Create heading row -->
<div class="row article-header">
<!-- Use bootsrap offset to play with non-set-columns -->
<div class="col-lg-offset-11 col-lg-1 user-likes text-center">
<i class="fa fa-heart" aria-hidden="true"></i> 3
</div>
</div>
<!-- Create article content row -->
<div class="row article-content">
<div class="col-lg-12 article-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</p>
<!-- Try to remember to always close all the nodes <br/> <hr/> <img/> -->
<br/>
<p>
Cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu
</p>
</div>
</div>
</article>
</section>
<!-- Create next section with comments and statistics (use bootstrap column to set default padding) -->
<section class="col-lg-12 two-columns">
<!-- Create the necessary nested row -->
<div class="row">
<!-- To use 2 columns grid create two divs with bootstrap colums set to 6
(4 column grid -> set bootstrap columns to 3 (3x4=12), 12 is the max column width)-->
<!-- To use 2 columns grid with space between columns use also offset, offset goes to right column -->
<!-- Start with comment column -->
<div class="col-lg-5">
<!-- Create a row to append the photo and comment as distinct columns -->
<form class="row">
<!-- User photo -->
<div class="col-lg-2 user-photo">
<img src="./assets/images/users/photo.png" alt=""/>
</div>
<!-- Textarea comment -->
<div class="col-lg-10">
<textarea class="info"> Добавить комментарий... </textarea>
</div>
<!-- Offset submit -->
<div class="col-lg-offset-9 col-lg-3">
<button class="form-submit text-right">Отправить</button>
</div>
</form>
</div>
<!-- Statistics col -->
<div class="col-lg-6 col-lg-offset-1">
<div class="col-md-12 author">
<div class="author-top">
<div class="author-name"> Автор </div>
<div class="user-photo">
<img src="./assets/images/users/marina-ivanova.png" alt="Лиза Фокина">
</div>
<div class="user-data">
<p class="user-name"><a href="#">Марина Иванова</a></p>
<ul class="user-control">
<li><a href="#">Добавить в друзья</a></li>
<li><a href="#">Отправить сообщение</a></li>
</ul>
</div>
</div>
<div class="article-bottom">
<div class="author">
<span class="author-data"> Дата добавления</span>
<span class="author-data-info"> 24 декабря 2017 года </span>
</div>
<div class="author">
<span class="author-data"> Комментарии </span>
<span class="author-data-info"> 3 комментария </span>
</div>
<div class="author">
<span class="author-data"> Просмотры </span>
<span class="author-data-info"> 37 просмотров </span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<!-- OLD HTML
<main>
--Container-fluid needs also container class, like button btn btn-primary--
<div class="container-fluid main">
<section class="row full-width-container">-- Cannot do row inside a row --
<div class="row">
<div class="col-md-12 full-width-tab">
<div class="panel panel-default">-- No need of use div for every class, you can nest classes into one div --
<div class="panel-heading content-article-header">
<div class="row">
<div class="col-md-11"> -- Prefere always column offset instead of adding empty columns --
</div>
<div class="col-md-1">
-- Nest classes into column class (the bootstrap column only sets the position properties widths, paddings, etc) --
<div class="user-likes text-center">
<i class="fa fa-heart" aria-hidden="true"></i> 3
</div>
</div>
</div>
</div>
-- Try to use shorter selectors content-article-body -> article-body --
<div class="panel-body content-article-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</p> <br>
<p>
Cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu
</p>
</div>
</div>
</div>
</div>
-- Always look to minimize the output html. You're getting complicated in adding columns and rows without considering which css properties apply bootstrap, which leaves the page disorganized and incomprehensible. --
<section class="row full-width-container">
<div class="col-md-6 full-width-tab">
<div class="row">
<form action="#">
<div class="col-md-12 full-width-section">
<div class="row add-comment-tab">
<div class="col-md-12 tab-element add-comment-tab">
<div class="row">
<div class="col-md-2">
<div class="user-photo">
<img src="./assets/images/users/photo.png" alt=""
>
</div>
</div>
<div class="col-md-10">
<p class="info">
<textarea> Добавить комментарий... </textarea>
</p>
</div>
</div>
</div>
</div>
<p class="form-submit text-right">
<button class="gradient">Отправить</button>
</p>
</div>
</form>
</div>
</div>
<div class="col-md-6 full-width-tab">
<div class="row">
<div class="col-md-12 full-width-section author">
<div class="col-md-12 tab-element article-feed article-section-author">
<div class="article-top">
<div class="author-article"> Автор </div>
<div class="user-photo">
<img src="./assets/images/users/marina-ivanova.png" alt="Лиза Фокина">
</div>
<div class="user-data">
<p class="user-name"><a href="#">Марина Иванова</a></p>
<ul class="article-user-control">
<li><a href="#">Добавить в друзья</a></li>
<li><a href="#">Отправить сообщение</a></li>
</ul>
</div>
</div>
<div class="article-bottom">
<div class="author">
<span class="author-data"> Дата добавления</span>
<span class="author-data-info"> 24 декабря 2017 года </span>
</div>
<div class="author">
<span class="author-data"> Комментарии </span>
<span class="author-data-info"> 3 комментария </span>
</div>
<div class="author">
<span class="author-data"> Просмотры </span>
<span class="author-data-info"> 37 просмотров </span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</div>
</main>
-->
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://use.fontawesome.com/ae7c834c9a.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>关于html - Bootstrap 3 CSS布局，宽度问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48639168/