网格系统外的移动元素答案

【问题标题】：Moving element outside of grid system网格系统外的移动元素
【发布时间】：2016-06-18 13:08:22
【问题描述】：

我正在使用 bootstrap 开发一个 tumblr 主题，我想在标题旁边为用户的个人资料图片提供一个不错的大区域。这里的问题是，引导程序的网格格式非常紧凑，我看不到任何我想要的空间：

看到那个红色的东西了吗？我想将它移动到蓝色箭头指向的位置。我尝试扩展容器，将红色圆圈设置为向左浮动，并将其设置为 margin-bottom:100%，但这将所有内容都推到了页面之外。

这是我的 css 和 HTML 供参考，有问题的项目标有“talkbubble”类：

CSS

//Media Queries
@media (min-width: 1200px){
    .container {
        width: 800px;
    }
}
@media (min-width: 992px){
    .container {
        width: 800px;
    }
}


//Header Edits
.jumbotron{
    margin-bottom: 0px;
    h1{
        color: red;
    }
}   

//upsidedown tab edits
.tab-content{
    padding:10px;
    border:1px solid #ddd;
    border-bottom:0px;
}
.nav-tabs {
    border-bottom: 0px;
    border-top: 1px solid #ddd;
}
.nav-tabs > li {
    margin-bottom:0;
    margin-top:-1px;
    margin-left: 32px;
    width: 71px; 
    white-space: nowrap;
}

.nav-tabs > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 20px;
    border: 1px solid transparent;
    background-color: #eee;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    border-radius:0px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px; 
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
    color: #555555;
    cursor: default; 
    background-color: #eee;
    border: 1px solid #ddd;
    border-top-color: transparent;
}

.nav-tabs > li.active > a {
    background-color: #eee !important;
}

.arrow {
    border-color: #eee transparent transparent #eee;
    border-style: solid;
    border-width: 17px 17px 17px 17px;
    height:0;
    width:0;
    position:absolute;
    bottom:2px;
    right:-33px;

}

.arrow2 {
    border-color: #eee #eee transparent transparent;
    border-style: solid;
    border-width: 17px 17px 17px 17px;
    height:0;
    width:0;
    position:absolute;
    bottom:2px;
    right:67px;

}


//square gallery
.square{
    border-radius: 20px;
    border-style: solid;
    border-width: 2px;
    width: 200px;
    height: 200px;
    margin-top: 60px;
}

//iconbubble

.talkbubble {
   width: 120px;
   height: 120px;
   background: red;
   position: absolute;
   -moz-border-radius: 60px;
   -webkit-border-radius: 60px;
   border-radius: 60px;
} 
.talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 50px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

下面的 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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
     <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/app.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap/tab.js"></script>
    <script src="js/jquery.fakecrop.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>


  <body data-pinterest-extension-installed="cr1.39.1">

    <div class="container">
        <div class="talkbubble"></div>
      <div class="header clearfix">
        <!--
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Home</a></li>
            <li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">About</a></li>
            <li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Contact</a></li>
          </ul>
        </nav>
        -->
        <h3 class="text-muted">Hi I'm...</h3>
      </div>

      <div class="jumbotron tab-content">
        <div id="home" class="tab-pane fade in active">
        <h1>CpBunni</h1>
        <p class="lead">...and I'm an artist.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
        <h1>CpBunni</h1>
        <p class="lead">...and I'm a cosplayer.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
        <h1>CpBunni</h1>
        <p class="lead">...and I'm a nude model.</p>
        </div>
      </div>
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
        <li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
        <li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
      </ul>

    <script>
        $(document).ready(function () {
            // for a filled square thumbnail
            $('.square img').fakecrop({fill: true, wrapperWidth: 200, wrapperHeight: 200});
        });
    </script>

      <div class="row marketing">
        <div class="col-sm-4">
          <a href="#"><div class="square"><img src="resources/testimg.jpg" alt="..."></div></a> 
        </div>

        <div class="col-sm-4">
        <a href="#"><div class="square"><img src="resources/testimg2.jpg" alt="..."></div></a>  
        </div>

        <div class="col-sm-4">
        <a href="#"><div class="square"><img src="resources/testimg3.jpg" alt="..."></div></a>  
        </div>
            <div class="col-sm-4">
            <a href="#"><div class="square"><img src="resources/testimg4.png" alt="..."></div></a>  

        </div>
            <div class="col-sm-4">
            <a href="#"><div class="square"><img src="resources/testimg5.jpg" alt="..."></div></a>  

        </div>
      </div>

      <footer class="footer">
        <p>© 2015 Company, Inc.</p>
      </footer>
       </div> <!-- /container -->


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="./Narrow Jumbotron Template for Bootstrap_files/ie10-viewport-bug-workaround.js"></script>
  <div id="scrollrail-vertical" class="disabled" style="width: 12px; border-left-width: 1px;"><div id="scrollbar-vertical" style="visibility: hidden; border-radius: 5px 7px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; height: 1015px; top: 2px; opacity: 0;"></div></div><div id="scrollrail-horizontal" class="disabled" style="height: 12px; border-top-width: 1px;"><div id="scrollbar-horizontal" style="visibility: hidden; border-radius: 14px 10px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; width: 1916px; left: 2px; opacity: 0;"></div></div><div id="window-resizer-tooltip"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#" title="Edit settings"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div></body>


</html>

【问题讨论】：

标签： html css twitter-bootstrap frontend web-frontend

【解决方案1】：

见this fiddle

诀窍是这样的：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      ...your image markup here...
    </div>
    <div class="col-md-9">
      ...
    </div>
  </div>

从md 开始，我已经将其设置为这样。您可能希望在较低宽度的图像列中使用hidden-*，因为从设计的角度来看，您所做的事情在移动宽度上看起来很奇怪。

【讨论】：

这就像一个魅力，也让我不必打破引导系统来这样做。：）完美的！这里的问题是我并不真正了解引导程序的网格系统。 “col-md-xx”中的数字加起来必须是 12，因此创建 3 和 9 两列给了我一个小区域，让我的个人资料图像不受干扰。
@bryanwillis7 是的，没错。我想知道您是否完全掌握了网格系统 - 如果您希望我在答案中进一步澄清我可以扩展的任何点。但你自己发现了这一点很好。对于 3-9，这使图像位于四分之一宽度。网格是 12 的原因是因为它划分得很好。
我注意到的一件事是，您可能值得花时间从头到尾阅读有关引导程序的文档。您可能会发现您正在尝试在 CSS/javascript 中执行 bootstrap 已经涵盖的各种事情。注意：getbootstrap.com/css/#images<img src="..." alt="..." class="img-rounded"> 用于圆形图像

【解决方案2】：

绝对位置是解决您问题的正确方法。但是你必须使用其他属性而不是float：
- top
- bottom
- left
- right

对于绝对定位的元素（位置：绝对或位置：固定），它指定元素的边距边缘与其包含块的边缘之间的距离。

对于相对定位的元素（那些具有 position:relative 的元素），它指定元素在其正常位置下方移动的量。

您可以将此属性直接应用于气泡而不是 before: 伪元素。
在 CSS 中对 cmets 使用 /* */ 而不是 //。例如：

/* iconbubble */
.talkbubble {
  position: absolute;
  top: 100px;
  left: 20px;
  z-index: 20;
}

请检查结果：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Media Queries */
@media (min-width: 1200px) {
  .container {
    width: 800px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 800px;
  }
}

/* Header Edits */
.jumbotron {
  margin-bottom: 0px;
  h1 {
    color: red;
  }
}

/* upsidedown tab edits */
.tab-content {
  padding: 10px;
  border: 1px solid #ddd;
  border-bottom: 0px;
}
.nav-tabs {
  border-bottom: 0px;
  border-top: 1px solid #ddd;
}
.nav-tabs > li {
  margin-bottom: 0;
  margin-top: -1px;
  margin-left: 32px;
  width: 71px;
  white-space: nowrap;
}
.nav-tabs > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 20px;
  border: 1px solid transparent;
  background-color: #eee;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  color: #555555;
  cursor: default;
  background-color: #eee;
  border: 1px solid #ddd;
  border-top-color: transparent;
}
.nav-tabs > li.active > a {
  background-color: #eee !important;
}
.arrow {
  border-color: #eee transparent transparent #eee;
  border-style: solid;
  border-width: 17px 17px 17px 17px;
  height: 0;
  width: 0;
  position: absolute;
  bottom: 2px;
  right: -33px;
}
.arrow2 {
  border-color: #eee #eee transparent transparent;
  border-style: solid;
  border-width: 17px 17px 17px 17px;
  height: 0;
  width: 0;
  position: absolute;
  bottom: 2px;
  right: 67px;
}

/* square gallery */
.square {
  border-radius: 20px;
  border-style: solid;
  border-width: 2px;
  width: 200px;
  height: 200px;
  margin-top: 60px;
}

/* iconbubble */
.talkbubble {
  position: absolute;
  top: 100px;
  left: 20px;
  z-index: 20;
  width: 120px;
  height: 120px;
  background: red;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 60px;
}
.talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}

<div class="container">
  <div class="talkbubble"></div>
  <div class="header clearfix">
    <!--
    <nav>
    <ul class="nav nav-pills pull-right">
    <li role="presentation" class="active"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Home</a></li>
    <li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">About</a></li>
    <li role="presentation"><a href="http://getbootstrap.com/examples/jumbotron-narrow/#">Contact</a></li>
    </ul>
    </nav>
    -->
    <h3 class="text-muted">Hi I'm...</h3>
  </div>

  <div class="jumbotron tab-content">
    <div id="home" class="tab-pane fade in active">
      <h1>CpBunni</h1>
      <p class="lead">...and I'm an artist.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h1>CpBunni</h1>
      <p class="lead">...and I'm a cosplayer.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h1>CpBunni</h1>
      <p class="lead">...and I'm a nude model.</p>
    </div>
  </div>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
  </ul>

  <div class="row marketing">
    <div class="col-sm-4">
      <a href="#"><div class="square"><img src="resources/testimg.jpg" alt="..."></div></a> 
    </div>
    <div class="col-sm-4">
      <a href="#"><div class="square"><img src="resources/testimg2.jpg" alt="..."></div></a>  
    </div>
    <div class="col-sm-4">
      <a href="#"><div class="square"><img src="resources/testimg3.jpg" alt="..."></div></a>  
    </div>
    <div class="col-sm-4">
      <a href="#"><div class="square"><img src="resources/testimg4.png" alt="..."></div></a>  
    </div>
    <div class="col-sm-4">
      <a href="#"><div class="square"><img src="resources/testimg5.jpg" alt="..."></div></a>  
    </div>
  </div>

  <footer class="footer">
    <p>© 2015 Company, Inc.</p>
  </footer>
</div> <!-- /container -->

【讨论】：

嗯，我试过了，标题仍然想浸在我的谈话泡泡下面，而不是坐在它旁边。我也尝试过添加 float 和 display: block ，但都不起作用
@bryanwillis7 绝对位置是解决您问题的正确方法。但是您必须使用其他属性而不是float。我已经更新了我的答案。
因此，虽然这确实如我所愿，但最终导致了更多问题。主要处理响应性。另外，我正在使用 SASS，我完全忘了提及这一点。我的坏