Question

这里我创建了一个页面。试图学习响应式页面设计。

在第二张表格上方，有一行＆＃39; Twitter timline＆＃39;。

在第二个表格上方的同一行中，我创建了按钮导出到csv。 如何将其与左对齐？

如何在那里放置小圆形按钮？

HTML

<h3> Twitter time line </h3>
<table class="table table-condensed">
  <thead>
    <tr class="active">
      <td class="active">Results</td>
      <td class="success">Date</td>
      <td class="warning">Time</td>
      <td class="danger">Twitter user</td>
      <td class="info">Reach</td>
      <td class="active">Contant</td>
      <td class="active">Tweet</td>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td class="active">1</td>
      <td class="success">john</td>
      <td class="warning">carry</td>
      <td class="danger">..dfd.</td>
      <td class="info">.dfd..</td>
      <td class="active">.fdfd..</td>
      <td class="success">...dfd</td>
    </tr>
  </tbody>
</table>

Answer 1

<div class="row demo-row">
<div class="col-xs-6">
     <h3> Twitter time line </h3>

</div>
<div class="col-xs-3"> <a href="#fakelink" class="btn btn-block btn-lg btn-primary">Export </a>

</div>

检查此fiddle

read more about bootstrap grid system

Answer 2

JSFIDDLE

<div class="row buttonWithText">
    <h3> Twitter time line </h3>
    <div class="col-xs-3 export">
         <a href="#fakelink" class="btn btn-block btn-lg btn-primary">Export </a>
    </div>
</div>


body > div.row.buttonWithText
{
    margin-bottom:10px;
}

div.col-xs-3.export
{
      vertical-align:middle; 
}

h3{
    float:left;
    margin:0px;
    display:table-cell;  
    line-height:45px;
    }

在响应页面上对齐自定义的CSS按钮

2 个答案: