Twitter Bootstrap HTML / CSS中的跨度放置答案

【问题标题】：Span Placement in Twitter Bootstrap HTML / CSSTwitter Bootstrap HTML / CSS中的跨度放置
【发布时间】：2014-01-10 03:35:53
【问题描述】：

我在这里遇到了一个小的 HTML/CSS Bootstrap 问题。基本上我有一个 span4，左边有一张图片，然后有一个 span8，右边有一段描述图片的段落。

<div class="container">
    <div class="cent text-center">
    <div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
     <div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
   <div class="span8 section">
   <h3 align="center">Title</h3>
   <div class="team">
   <p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>

   </div><!---team END--->
   </div><!---span8--->
    </div><!---Row END--->
   </div><!----cent END--->
   </div><!--container END-->



.cent{
    text-align:center;
    margin:auto;
    width:auto;
    }

    .section {
    padding-top:20px;
    margin:auto;
    }

.team {
    text-align:center;
    margin:auto;
    max-width:600px;!important
    padding-left:20px;!important
    padding-right:20px;!important
    }

    .profile {
        max-width:200px;
        text-align:center;
        margin:auto;
        padding-top:10px;
        }

        .pro {
            padding-left:100px;!important
            }

            .box {
                background:#FFF;
                border:1px solid #CCC; 
                box-shadow: 0px 1px 1px #CCC; 
                padding: 0px 20px 20px 0px;
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                border-radius: 7px;
                min-height:220px;
                }

现在我唯一想做的就是反转代码，使图片现在在左侧，描述在右侧，但是当我这样做时，span4 似乎不在span8 的一侧而是在它下面。

<div class="container">
    <div class="cent text-center">
    <div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
   <div class="span8 section">
   <h3 align="center">Title</h3>
   <div class="team">
   <p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
   <div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
   </div><!---team END--->
   </div><!---span8--->
    </div><!---Row END--->
   </div><!----cent END--->
   </div><!--container END-->

【问题讨论】：

标签： css twitter-bootstrap twitter html

【解决方案1】：

那里有很多不必要的代码。也许这不是您正在寻找的东西，但我没有试图弄清楚您提供的代码，而是重新开始并提供了一种更简洁的方式来完成您想要完成的工作。

您应该在询问已经存在的内容时修改您的问题。在顶部你说：“基本上我有一个 span4，左边有一张图片，然后一个 span8，右边有一段描述图片的段落。”但是在下面你说“现在我唯一想做的就是反转代码，这样图片现在在左边，描述在仪式上，但是当我这样做时，span4 似乎不在一边span8 而是在它下面。”

关键是使用“float”属性。

这里是html：

<div class="container">
    <div class="span4">
        <img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" />
    </div>
    <div class="span8">
        <div class="span8-text">
             <h3>Title</h3>

            <p>this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
        </div>
    </div>
</div>

和css：

.container {
    position: relative;
    clear: both;
    text-align: center;
}
.span4 {
    float: right;
    width: 200px;
}
.span8 {
    position: relative;
    float: left;
    width: 350px;
}

这里是 jsfiddle：http://jsfiddle.net/h69Bh/

【讨论】：

我试过这个似乎我遇到了更多的问题，因为描述和图片的元素都到了页面的角落..就像描述会一直到左边留下一个一直向右的图片之间的巨大差距。
您必须为“容器”类添加指定的宽度，或者您可以将 span4 和 sapn 8 包装到另一个
中并赋予该
边距：0 auto;然后是指定的宽度（比如 600 像素）。这将使内容居中并防止差距

【解决方案2】：

使用 CSS float 属性 span8 float:left 和 span4 float:right

看看DEMO

【讨论】：

那不工作它仍然在跨度 8 的底部而不是在它的右侧
试试 demo.for span 8 你必须指定宽度。

【解决方案3】：

就是这样：将此添加到引导 cdn 的所有链接下方的 head 部分：

<style>
      img{
        width: 100%;
        height: 100%;
      }
  </style>

这个在body标签中：

<div class="container img-responsive">
    <div class="row">
       <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
         description goes here
       </div>
       <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
         <img src="1.jpg">  
       </div>

    </div>
    <div>

检查响应：https://jsfiddle.net/sugandhnikhil/c0zoq8e1/1/

【讨论】：