html - Bootstrap 3 CSS布局，宽度问题

标签 html css twitter-bootstrap

请点击展开代码段以在大屏幕上查看。

目标

我需要使带有文本的面板和下方的 2 个白色标签的长度相同。

问题

如您所见，右侧的选项卡比面板短。

我附上了指向我的问题的图片。

enter image description here 

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>

请帮我解决这个问题，谢谢!

最佳答案

您有多个 row 直接嵌套在其他 row 元素中。

row 元素应用负 margin 和 col 元素应用 margin 来创建网格。将 row 嵌套到 row 中会弄乱间距。

如果您需要创建嵌套结构，它们应该遵循row->col->row 模式，如下所示:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6">One</div>
        <div class="col-md-6">Two</div>
      </div>
    </div>
  </div>
</div>

关于html - Bootstrap 3 CSS布局，宽度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48639168/

上一篇：css - "a"元素的相同高度和垂直对齐

下一篇：css - 在标记中重复主导航对可访问性不利吗？

相关文章：

html - 流体布局面板未扩展到底部

html - 如何解决表格列太窄的问题？

html - Bootstrap 列的中心内容

javascript - 如何强制聊天框 DIV 在使用 jQuery 出现新消息时保持底部显示

css - 激活时 Bootstrap Accordion CSS 样式

html - 模态警报

javascript - 控制台错误 : [function] is not defined, 虽然它是

javascript - 为什么我不能在 Material Design Lite 中使用自定义字体？

python - 用 python 替换 HTML 中的粗体标题

javascript - javascript摇动浏览器屏幕的效果

©2024 IT工具网  联系我们