右边是div

Question

我有一个联系表单，我需要将它浮动在容器的最右侧。我该怎么做？我正在尝试一切，但没有任何反应。也许我必须为列设置不同的 class？这是代码：

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

在表单组内将 col-sm-10 更改为 col-sm-12，这将使您的输入字段占据表单的整个宽度，或者如果您希望它们右对齐，请将 float:right 给您的 col -sm-10 div 它会起作用

Answer 2

不确定你真正想要什么，但如果你想让整个表格都在屏幕的最右边，你必须删除 div class=[= 的固定宽度14=] 这就是你在右侧有白色 space 的原因。

如果您希望输入位于红色边框区域的右侧，您应该将 "float:right" 放在 col-sm-10" class 上。希望对您有所帮助

Answer 3

添加 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>

右边是div

Aling a div on right

html

css

css-float

twitter-bootstrap