Question

我正在尝试将某个按钮和一个输入框与表格对齐。根据是否存在一天，页面上可能存在也可能不存在前一天和下一天。下面是起始码，电流输出和所需输出。

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

Answer 1

我会给第二天的按钮提供一个pull-right类（一个引导类），而日期字段为center类（自定义类），其中center定义为< / p>

.center {

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

认为应该有效

Answer 2

除了Accipheran的回答，我还使用了Twitters网格系统来获得理想的结果。代码如下：

<强> 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;

}

使用twitter bootstrap对齐表格顶部的按钮项目

2 个答案: