Twitter bootstrap 3 列中的引导列_Twitter Bootstrap 3

Twitter bootstrap 3 列中的引导列

twitter-bootstrap-3

Twitter bootstrap 3 列中的引导列,twitter-bootstrap-3,Twitter Bootstrap 3,我正在设计一个模板，以使用twitter bootstrap 3显示产品图像[I]和描述[d]，如下所示（问题是我无法将图像和描述保持在一起，它们不断以不同的屏幕大小跳转）要求：  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and

我正在设计一个模板，以使用twitter bootstrap 3显示产品图像[I]和描述[d]，如下所示（问题是我无法将图像和描述保持在一起，它们不断以不同的屏幕大小跳转）

要求：

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->

1）对于大型和中型，它将是2列

|             |
|[i][d] [i][d]|
|[i][d] [i][d]|
|[i][d]       |
|             |

2）对于较小的，它将类似于1列（描述仍需在其一侧）

3）对于额外的小，它将像一列，但描述将遵循图像

|   |
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|   |

问题：

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->

我在这里遇到了小屏幕的问题，因为我在[I]和[d]之间有很多空间

|[i]  [d]|
|[i]  [d]|
|[i]  [d]|
|[i]  [d]|
|[i]  [d]|

同样，在一些屏幕大小（介于中、小之间）下，一行的图像会自动粘贴在前面描述的底部

|[i]  [d]|
|     [i]|
|[d]  [i]|
|[d]     |

代码：

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->

我正在尝试以下HTML代码

谢谢

在指定列时，您似乎需要更明确一点。通过在行div的直接子级上指定列宽，您可能会得到想要的结果

<div class="row">
   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <!-- Image Content -->
      </div>
      <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
          <!-- Description -->
      </div>
   </div>
</div>

我举了一个例子。

几个问题：

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->

您没有正确嵌套列，最初回答问题的人也没有。重新阅读文档并查看示例。在列中嵌套列时，必须嵌套行并使用相同的结构

.row.col-.row.col-

在

页眉

和

分页

和

页脚

的情况下不必要地使用

col-X-12

。如果某些东西总是全宽的，不要使用网格系统。这在文档中

img responsive使图像不会超过其自然宽度，但引导栅格是流动的，因此在任何给定的视口宽度下都会有很大的间隙，除非使用较大的图像进行补偿

任何给定断点处的每12列都需要使用响应实用程序类或新的

.row

的

.clearfix

演示： 移动第一基础：

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->

col-sm=视口768px及以上，因此如果某个对象是col-sm-4，则与 col-md-4和col-lg-4及其以下为全宽

col md=视口992px及以上，因此如果某个对象是col-md-8，则与 col-lg-8及以下为全宽

col lg=视口1200px及以上，因此，如果某个对象是col-lg-8，则其下的任何对象都将是全宽的

col xs=覆盖0及以上的所有视口大小

CSS:

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->

注意：大多数人都同意767px对于许多小视口情况来说是一个非常高的断点，为了逐个解决这个问题，而不是编写垃圾加载更多代码，使用了类

。col xs-*

，然后在最大宽度处使用CSS以使列达到全宽。Bootstrap缺少垂直空间，除非您将

.btn

包装在

中，就像您在其网站上找到的所有示例一样，您还会注意到文本旁边缺少图像，因为边距没有在框外对齐，这一点已得到纠正

HTML:

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->


切换导航








页眉
次要文本
项目一
副标题
Lorem ipsum dolor sit amet，奉献精英。劳丹蒂姆·维尼安在沃卢普塔特实习。劳尔，沃卢塔姆在《海底总动员》中扮演了一个伟大的角色，在《暮光之城》中扮演着一个清晰的角色

项目一
副标题
Lorem ipsum dolor sit amet，奉献精英。劳丹蒂姆·维尼安在沃卢普塔特实习。劳尔，沃卢塔姆在《海底总动员》中扮演了一个伟大的角色，在《暮光之城》中扮演着一个清晰的角色

项目一
副标题
Lorem ipsum dolor sit amet，奉献精英。劳丹蒂姆·维尼安在沃卢普塔特实习。劳尔，沃卢塔姆在《海底总动员》中扮演了一个伟大的角色，在《暮光之城》中扮演着一个清晰的角色

项目一
副标题
Lorem ipsum dolor sit amet，奉献精英。劳丹蒂姆·维尼安在沃卢普塔特实习。劳尔，沃卢塔姆在《海底总动员》中扮演了一个伟大的角色，在《暮光之城》中扮演着一个清晰的角色