使用Twitter Bootstrap col-sm-2和col-sm-10中断<a> tag</a>

Question

在创建带有轮廓的侧边栏时，我的目标是在样式化链接中包含一个小的左列和一个大的右列，用户可以单击该链接以访问分配文档。

这包含所有文本，但没有任何列，只有出现在文档名称中心的数据：

<a class="assignment" ng-href="#/course/{{state.course.id}}/lesson/{{$parent.$index}}?    page={{$index}}">
  <div class="text-center assignment-due">
   <p>
      {{page.due_date | todayDate: 'EEE'}}
    </p>
    <small>
      {{page.due_date | date:'MMM dd'}}
    </small>
  </div>
  <div>
    <h4 class="assignment-name">
      <b>Assignments</b>
      {{page.name}}
    </h4>
  </div>
</a>

但是，以下情况会导致代表样式化链接的框在文本和日期上方显示一些距离，位于其他项目之上（即使列显示正确：

<a class="assignment" ng-href="#/course/{{state.course.id}}/lesson/{{$parent.$index}}?page={{$index}}">
  <div class="col-sm-2 text-center assignment-due">
    <p>
      {{page.due_date | todayDate: 'EEE'}}
    </p>
    <small>
      {{page.due_date | date:'MMM dd'}}
    </small>
  </div>
  <div class="col-sm-10">
    <h4 class="assignment-name">
      <b>Assignments</b>
      {{page.name}}
    </h4>
  </div>
</a>

我试过移动链接，添加额外的标签等，但只要col-sm-X标签在那里，链接就不会包装文本。

除了放弃Twitter Bootstrap以外的其他任何想法，还有其他方式来获取列？

谢谢！

更新：通过大纲中的赋值和讨论（与赋值相同的对象）对象，它就是这样的：

更新＃2：这对我有用：http://jsfiddle.net/LVdBv/11/

Answer 1

根据html标准，<a>是内嵌级标记，您无法将div或ul等块级标记放入其中。通过跳过这些规则，您的代码将无效，并且您可能在某些浏览器中遇到问题。

我认为我设法通过更改您的HTML代码并使用css来设置elemet的样式来解决您的问题：

<div class="row">
    <a class="assignment" ng-href="#/course/{{state.course.id}}/lesson/{{$parent.$index}}?page={{$index}}">
        <span class="col-sm-10 col-md-10 lft">
            <span class="assignment-name">
                <b>Assignments</b>
                "Hey, Hey Baby"
            </span>
        </span>
        <span class="col-sm-2 col-md-2 text-center assignment-due rgt">
            <span class="day">
                Tue
            </span>
            <small class="date">
                Jan 15
            </small>
        </span>
    </a>
</div>

和CSS：

a.assignment { display: block; }
a.assignment > span { display: inlin-block; }
a.assignment > span span { display: inline-block; }
.day { display: block; }
.assignment-name b { display: block; }

小提琴：http://jsfiddle.net/LVdBv/7/
小提琴预览：http://jsfiddle.net/LVdBv/6/embedded/result/