Bootstrap form layout, input box and icon alignment

1. First look at the screenshot
picture description

I want to keep a straight line between the left side and the right side of the input box
and a straight line on the right

2. The static box
code of bootstrap is used as follows:


                                <div class="form-group">
                                    <label for="task_begintime" class="col-sm-3 control-label"></label>

                                    <div class="col-sm-9 input-group date " id="datepicker1" >

                                    <input type="text" class="form-control" id="task_begintime" name="task_begintime">
                                        <span class="input-group-addon col-sm-1">
                                            <i class="glyphicon glyphicon-calendar"></i>
                                        </span>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="task_endtime" class="col-sm-3 control-label"></label>

                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="task_endtime" name="task_endtime">
                                    </div>
                                </div>

4. I don"t know much about the length setting and relative relationship of bootstrap. For friends you have met, please give me a hint

Flask javascript

Mar.20,2021

A class affects "input-group"

look at bootstrap grid nesting to add div has been solved, the new problem is this

<div class="form-group">
                                    <label for="task_begintime" class="col-sm-3 control-label"></label>

                                    <div class="col-sm-9 input-group date row" id="datepicker1" >
                                        <div class="col-sm-11" style="margin-right: -15px">
                                           <input type="text" class="form-control" id="task_begintime" name="task_begintime">
                                        </div>
                                        <div class="col-sm-1" style="margin-left: -15px; margin-right:30px">
                                            <span class="input-group-addon">
                                            <i class="glyphicon glyphicon-calendar" style="font-size: 18px"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>

margin-right

https://www.cnblogs.com/jiqin...
:

if you encounter a similar problem, you can also refer to the link above, especially if alignment and other operations are required

Previous: The ie11 debug tool reported an error and cannot be used

Next: Click on the menu bar on the left, do not refresh the page, only change the body content, how to achieve?

Does the browser use jQuery Ajax to get the server Datagram Provisional headers are shown error?
problem description try to do a hands-on project after learning the Flask framework. The function is to collect and use the hash decryption API exposed on the network to obtain plaintext when the server data is obtained through jQuery.get (), it is f...

Ajax jquery flask javascript python

Mar.28,2021
After Flask post, the background processing completes the parameter transfer update page?
the interface written with Flask, you want to click on the string on the page, and then return the string to python,python after processing, and then return it to the front end, which is displayed on a blank page. I just came into contact with flask. I ...

Python flask javascript html

Apr.15,2021