Question

I have this a contact form and I need to float it at the extreme right of its container. How can i do it? I'm trying with everything but nothing happen. Maybe i have to set different class for columns? This is the code:

HTML

<section id="services" class="section text-center">
        <div class="container">
            <div class="col-md-6 map">
     <!-- Responsive iFrame -->
<div class="Flexible-container">
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2694.5937634214993!2d8.0133807!3d47.5173021!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x9b610c417aa1ee02!2sZAG+Engineering!5e0!3m2!1sde!2sch!4v1443705863599"></iframe>
                </div></div>
            <div class="col-md-6 form">
                <form class="form-horizontal" role="form" method="post" action="index.php">
    <div class="form-group">      
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
        </div>
    </div>
                 <div class="form-group">
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="Firma" value="">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
        </div>
    </div>
                          <div class="form-group">
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="Telefon" value="">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10">
            <textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <! Will be used to display an alert to the user>
        </div>
    </div>
</form></div>
            </div>

        <!--/.container -->
    </section>

CSS

.col-md-6.map { margin-left: -15px; }
.form-horizontal { width: 100%; float: right; }
.form-group { margin-bottom: -25px; }
.col-md-6.form { border: 1px solid red !important; }

Answer 1

inside form-group either change col-sm-10 to col-sm-12 that will make your input fields take entire width of your form or if yo want them right aligned give float:right to your col-sm-10 div it will work

Answer 2

Not sure what you really want, but if you want the whole form being at the extrem right of the screen, you have to remove the fixed width of your div class="container" which is the reason you have white space on right side.

If you want input being on the right side of your red-bordered area, you should put "float:right" on the col-sm-10" class. Hope it helped you

Answer 3

Add col-md-offset-2

<div class="form-group">
    // place col-md-offset-2 here for each input
    <div class="col-sm-10 col-md-offset-2">
        <input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
    </div>
</div>

Aling a div on right

3 个答案: