使用twitter引导对齐表格顶部的按钮项

问题描述：

我正在尝试将某个按钮和输入框与表对齐。取决于一天是否存在，前一天和第二天可能会或可能不会出现在页面上。以下是开始代码，当前输出和所需输出。使用twitter引导对齐表格顶部的按钮项

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    </head> 

    <body> 


    <div class="container"> 
     <form class = "form-inline" > 
      <h1>some data</h1> 
      <br> 
      <button class="btn" name = "prevDayBtn"><i class="icon-backward"></i> Previous Day</button> 
      <input type='text' READONLY name = 'pageDate' value = '2013-05-18' /> 
      <button class="btn" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button> 
      <br> 
      <br> 
      <table class = "table table-striped"> 

      <th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th> 
      </table> 
     </form> 
    </div> <!-- /container --> 



    </body> 
</html>

电流输出

enter image description here

所需的输出

enter image description here

编辑：

我试过了Accipheran答案，并得到了下面的结果。还添加了代码的jsfiddle http://jsfiddle.net/Y9SLs/1/

enter image description here

答

除了Accipheran的答案，我使用Twitter的网格系统，以获得期望的结果。下面的代码：

HTML

</head> 

    <body> 


    <div class="container"> 
     <form class = "form-inline" > 
      <h1>some data</h1> 
      <div class = "row"> 
       <div class = "span4"> 
        <button class="btn" name = "prevDayBtn pull-left"><i class="icon-backward"></i> Previous Day</button> 
       </div> 
       <div class = "span4"> 
        <input class = "center " type='text' READONLY name = 'pageDate' value = '2013-05-18' > 
       </div> 
       <div class = "span4"> 
        <button class="btn pull-right" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button> 
       </div> 
      </div> 
      <br> 
      <div class = "row"> 
       <div class = "span12"> 
        <table class = "table table-striped"> 
         <th>col11</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th> 
        </table> 
       </div> 
      </div> 
     </form> 
    </div> <!-- /container --> 



    </body> 
</html>

附加CSS

input.center {

float: none; 
display: table; 
margin: 0 auto;

}

答

我会给第二天按钮一类pull-right（自举类）和日期字段类center（自定义类），其中center被定义为

.center { 

    float: none; 
    display: table; 
    margin: 0 auto; 
}

认为应该工作

拉的权利做了这项工作，但我无法让.center css工作 – Richard

嗯，我不完全是一个HTML/CSS向导，所以我不知道为什么可能是这种情况。你可以尝试将显示设置为绝对而不是表格。此外这个问题可能有助于http://*.com/questions/114543/how-to-center-a-div-in-a-div-horizontally –

使用twitter引导对齐表格顶部的按钮项

相关推荐