0

我正在尝试将某些按钮和输入框与表格对齐。前一天和后一天可能会或可能不会出现在页面上，具体取决于是否存在一天。下面是开始代码、当前输出和所需输出。 

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

电流输出

在此处输入图像描述

期望的输出

在此处输入图像描述

编辑：

我尝试了 Accipheran 答案并得到了以下结果。还向 jsFiddle http://jsfiddle.net/Y9SLs/1/添加了代码

在此处输入图像描述

4

2 回答 2

1

除了 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

输入中心{

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

}

于 2013-06-18T13:24:15.600 回答
1

我会给次日按钮一个类pull-right（一个引导类）和一个日期字段类center（自定义类），其中center定义为

.center {

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

认为应该工作

于 2013-06-18T12:03:12.890 回答