Html 网格系统外的移动元素_Html_Css_Twitter Bootstrap_Frontend_Web Frontend

Html 网格系统外的移动元素

html css twitter-bootstrap

Html 网格系统外的移动元素,html,css,twitter-bootstrap,frontend,web-frontend,Html,Css,Twitter Bootstrap,Frontend,Web Frontend,我正在用bootstrap开发一个tumblr主题，我希望在标题旁边有一个很大的区域来显示用户的个人资料图片。这里的问题是，引导有一个非常紧凑的网格格式，我看不到我想要的任何空间：看到那个红色的东西了吗？我想把它移到蓝色箭头指向的地方。我尝试过扩展容器，将红色圆圈设置为向左浮动，并将底部边距设置为100%，但这将所有内容都从页面上推了下来这是我的css和HTML供参考，所讨论的项目标有类“talkbubble”： CSS 下面是HTML 引导101模板嗨，我是。。。 CpBunni …

我正在用bootstrap开发一个tumblr主题，我希望在标题旁边有一个很大的区域来显示用户的个人资料图片。这里的问题是，引导有一个非常紧凑的网格格式，我看不到我想要的任何空间：

看到那个红色的东西了吗？我想把它移到蓝色箭头指向的地方。我尝试过扩展容器，将红色圆圈设置为向左浮动，并将底部边距设置为100%，但这将所有内容都从页面上推了下来

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

CSS

下面是HTML


引导101模板
嗨，我是。。。
CpBunni
…我是一名艺术家
CpBunni
…我是一名cosplayer
CpBunni
…我是个裸体模特





$（文档）.ready（函数（）{
//用于填充方形缩略图
$（'.square img'）.fakecrop（{fill:true，wrapperWidth:200，wrapperHeight:200}）；
});
©2015年公司股份有限公司
窗口大小：x
视口大小：x

绝对位置是解决问题的正确方法。但是您必须使用另一个属性，而不是

float

：

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

对于相对定位的图元（具有位置：relative的图元），它指定图元移动到其正常位置以下的量

您可以直接将此属性应用于气泡，而不是将

应用于before:

伪元素

在CSS中使用

/**/

而不是

作为注释。例如：

请检查结果：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/*媒体查询*/
@介质（最小宽度：1200px）{
.集装箱{
宽度：800px；
}
}
@介质（最小宽度：992px）{
.集装箱{
宽度：800px；
}
}
/*标题编辑*/
琼伯伦先生{
边缘底部：0px；
h1{
颜色：红色；
}
}
/*“向上向下”选项卡编辑*/
.选项卡内容{
填充：10px；
边框：1px实心#ddd；
边框底部：0px；
}
.导航标签{
边框底部：0px；
边框顶部：1px实心#ddd；
}
.nav选项卡>li{
页边距底部：0；
页边顶部：-1px；
左边距：32px；
宽度：71px；
空白：nowrap；
}
.导航选项卡>li>a{
填充顶部：8px；
垫底：8px；
线高：20px；
边框：1px实心透明；
背景色：#eee；
-moz边界半径：0px；
-webkit边界半径：0px；
边界半径：0px；
-moz边框半径右下角：10px；
-webkit边框右下半径：10px；
边框右下半径：10px；
-moz边框半径左下角：10px；
-webkit边框左下半径：10px；
边框左下半径：10px；
}
.nav选项卡>.active>a，
.nav选项卡>.active>a:悬停，
.nav选项卡>.active>a:焦点{
颜色：#555555；
游标：默认值；
背景色：#eee；
边框：1px实心#ddd；
边框顶色：透明；
}
.nav选项卡>li.active>a{
背景色：#eee！重要；
}
.阿罗{
边框颜色：#eee透明透明#eee；
边框样式：实心；
边框宽度：17px 17px 17px 17px；
身高：0；
宽度：0；
位置：绝对位置；
底部：2px；
右：-33px；
}
.箭头2{
边框颜色：#eee#eee透明透明；
边框样式：实心；
边框宽度：17px 17px 17px 17px；
身高：0；
宽度：0；
位置：绝对位置；
底部：2px；
右：67px；
}
/*广场画廊*/
.广场{
边界半径：20px；
边框样式：实心；
边框宽度：2倍；
宽度：200px；
高度：200px；
边缘顶部：60像素；
}
/*我怀疑*/
.talkbubble{
位置：绝对位置；
顶部：100px；
左：20px；
z指数：20；
宽度：120px；
高度：120px；
背景：红色；
-moz边界半径：60px；
-webkit边界半径：60px；
边界半径：60px；
}
.talkbubble:以前{
内容：“；
位置：绝对位置；
右：100%；
顶部：50px；
宽度：0；
身高：0；
边框顶部：13px实心透明；
右边框：26px实心红色；
边框底部：13px实心透明；
}


嗨，我是。。。
CpBunni
…我是一名艺术家
CpBunni
…我是一名cosplayer
CpBunni
…我是个裸体模特





©2015年公司股份有限公司

请参见

诀窍在于：

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

作为较低宽度的图像列，因为从设计角度看，您所做的事情在移动宽度上看起来很奇怪。

Hm我尝试过，但标题仍然希望位于我的聊天泡泡下方，而不是坐在旁边。我还尝试添加了float和display：block和noteworked@bryanwillis7绝对位置是解决问题的正确方法。

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

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

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