使用Twitter Bootstrap col-sm-2和col sm-10破坏<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 X标签在那里，链接就不会对文本进行换行。

除了放弃Twitter Bootstrap，转而采用其他方式获取专栏之外，还有什么想法吗？

谢谢!

更新:大纲中包含assignment和discussion (定义与assignments相同)对象，如下所示：

​

更新#2:这对我很有效：http://jsfiddle.net/LVdBv/11/

Answer 1

根据html标准，<a>是一个内联级标签，您不能在其中放置像div或ul这样的块级标签。通过跳过这些规则，您的代码将是无效的，并且您可能会在某些浏览器中遇到问题。

我想我已经解决了你的问题，通过修改你的HTML代码，并使用css来设计元素的样式：

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