Css 维护子分区定位

Css 维护子分区定位,css,html,twitter-bootstrap,positioning,Css,Html,Twitter Bootstrap,Positioning,我很难找到解决问题的办法 我在一页的页脚处工作。从左到右在一行中,有一个免责声明div,然后是一个包含FaceBook和Twitter按钮的父div (蓝色~免责声明div,粉色~父div,红色~ twitter按钮的颜色;facebook按钮没有单独的颜色)。 目标是让Twitter按钮始终位于FaceBook按钮的右侧 免责声明div设置为最小大小(页面使用Twitter引导),因此当其大小足够小时,按钮的父div将移动到免责声明div下面的下一行。 我遇到的问题是,当这个按钮parent

我很难找到解决问题的办法

我在一页的页脚处工作。从左到右在一行中,有一个免责声明div,然后是一个包含FaceBook和Twitter按钮的父div

(蓝色~免责声明div,粉色~父div,红色~ twitter按钮的颜色;facebook按钮没有单独的颜色)。
目标是让Twitter按钮始终位于FaceBook按钮的右侧

免责声明div设置为最小大小(页面使用Twitter引导),因此当其大小足够小时,按钮的父div将移动到免责声明div下面的下一行。
我遇到的问题是,当这个按钮parent div向下移动时,Twitter按钮会从parent div中弹出,并显示在FaceBook按钮下方的一列中

页脚本身的代码:

<div class="container">
  <div id="footer" class="row">
    <div class="span9 footer-leftspan">
       <xsl:copy-of select="data/footer-content/entry/content" />
    </div>

    <div class="row">
      <div class="span3 social-media-footer">
        <div id='face' class="span1">

      <!-- FaceBook Button -->
          <a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
      <img id="fb-btn" class="social-img" src="/f.svg" alt="...." />
      </a>

    </div>

        <!-- Twitter Button -->
    <div id='twitt' class="span1">
      <a class="button-link" href="https://twitter.com/...." target="_blank">
      <img id="twitt-btn" class="social-img" src="/t.svg" alt="...." />
      </a>
    </div>

      </div>
    </div>

  </div>
</div>

除了任意的颜色,按钮或其父div上没有特定的CSS规则。
我真的不知道这一点,我能找到的唯一看似可行的解决方案是用绝对或固定按钮来定位按钮,这两种按钮都不能按我的意愿将它们保留在页脚的父按钮中。
我希望帮助实现的主要目标是让Twitter按钮在resize上停留在父div中。

有什么想法吗?提前谢谢你

看看这是否适合您:

我对你的HTML进行了一些编辑,这样twitter和facebook图标就在同一个范围内,而不是在嵌套的网格中分开。这样做解决了桌面和智能手机窗口大小的问题,但平板电脑却没有

为了解决平板电脑的问题,我将两个图标包装在一个类中,强制使其具有最小宽度:

HTML

<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
   <xsl:copy-of select="data/footer-content/entry/content" />
</div> <!-- close span9 -->

  <div class="span3 social-media-footer">


<div class="social-wrapper">
  <!-- FaceBook Button -->
      <a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
  <img id="fb-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/facebook.jpg" alt="...." />
  </a>

    <!-- Twitter Button -->

  <a class="button-link" href="https://twitter.com/...." target="_blank">
  <img id="twitt-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/twitter.jpg" alt="...." />
  </a>
</div><!-- close social-wrapper -->


  </div> <!-- close span3 -->
</div> <!-- close row -->


</div><!-- close container -->
祝你好运

.social-wrapper{
min-width:185px !important; /* adjust as necessary depending on icon sizes */
}