带有自举程序的日期选择器对齐的问题

Question

我正在尝试对齐输入控件，并且遇到对齐问题。这是我尝试创建UI设计的代码片段，我需要在每组输入控件周围创建带有矩形边框/容器的UI，并让我知道是否可以使用Booststrap实现类似的功能。 。

在上图中，“日历图标”没有在“日期​​”文本框旁边移动，并推动了其他导致对齐问题的控件。我也有模拟设计。

    <div class="container-fluid bg-3 text-center">
  <form>
        <div class="form-row">

            <div class=" form-group date col-md-2 ">
                <label for="DateFrom">Date From</label>

                <input type="text" class="form-control" id="DateFrom">
                <span class="form-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>

            </div>
            <div class="form-group date  col-md-2">
                <label for="Dateto">Date To</label>
                <input type="text" class="form-control" id="Dateto">
                <span class="form-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>

            <div class=" form-group col-md-2 ">
                <label for="DD1">Dropdown1</label>
                <select class="form-control" id="DD1">
                    <option selected value=All>All</option>
                    <option value=Val1>Val1</option>
                    <option value=Val2>Val2</option>
                </select>
            </div>

            <div class=" form-group col-md-3 ">
                <label for="DD2">Dropdwon2</label>
                <select class="form-control" id="DD2">
                    <option value=All>All</option>
                    <option value=val1>val1</option>
                    <option value=val2>val2</option>

                </select>
            </div>
            <div class=" form-group col-md-3 ">
                <label for="DD3">Dropdown3</label>
                <select class="form-control" id="disposition">
                    <option value=All>All</option>
                </select>
            </div>
        </div>
        <div class="form-row">

            <div class=" form-group col-md-2">
                <label for="Date">Date</label>
                <label class="radio-inline"><input type="radio" name="dateradio" checked>Start Date</label>
                <label class="radio-inline"><input type="radio" name="dateradio">End Date</label>
            </div>
            <div class="form-group col-md-2">
                <label for="dd4">Dropdown4</label>
                <select class="form-control" id="dd4">
                    <option selected value=All>All</option>
                </select>
            </div>
            <div class=" form-group col-md-2 ">
                <label for="DDl5">Dropdowmn5</label>
                <select class="form-control" id="DDl5">
                    <option value=All>All</option>

                </select>
            </div>

            <div class=" form-group col-md-2">
                <label for="Dsply">Display</label>
                <label class="radio-inline"><input type="radio" name="Dsply" checked>Val1</label>
                <label class="radio-inline"><input type="radio" name="Dsply">Val2</label>
            </div>
        </div>
        <div class="form-row">

            <div class=" form-group col-md-2">
                <button type="button" class="btn btn-success" >btn1</button>
            </div>
            <div class="form-group col-md-2">
                <button type="button" class="btn btn-success" >btn2</button>
            </div>
            <div class=" form-group col-md-2 ">
                <button type="button" class="btn btn-success" >btn3</button>
            </div>

            <div class=" form-group col-md-2">
                <button type="button" class="btn btn-primary" >btn4</button>
            </div>
        </div>
    </form>
</div>

请找到样机设计和预期输出您能否让我知道如何解决对齐问题，以及如何将“日历图标”的下一个/向右移动到日期文本框并获取输入控件周围的边框。

Answer 1

我将尝试首先回答关于'日历图标'。您需要使css能够在background中显示图标并推送文本，我会这样：

#icon {
  height: 40px;
  margin-top: 10px;
  border: 1px solid #e6e6e6;
  padding-left: 40px;
  padding-right: 50px;
  background: #f5f5f5 url(http://i.imgur.com/5xD8KRw.png);
  background-repeat: no-repeat;
  background-position: left 10px center;
}

<input type="text" id="icon" value="input">

如果您需要使用only Bootstrap，那么我建议将<span>与引导类input-group-addon一起使用，并在其中放置带图标的<i> tag 。例如：

<form>
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input id="email" type="text" class="form-control" name="email" placeholder="Email">
    </div>
</form>

所以输出应该是这样的：

为此，您需要找到正确的Bootstrap中列的大小，因此，如果您将数字[]]更改为 col-md-2会在行中创建不同大小列，以便您可以使用它。 其他变化： -对于换行，您可以使用HTML标记4,3,5,8 (col-md-4) -和要对齐单选按钮，请使用类<br />text-left