html - Css Bootstrap 形式 Rails 3.2

Question

我会在左边有表格，但我得到了右边的表格:

我真的不知道是什么问题。可能有些 Css 与 bootstrap 形成对比。我会将 text-field 分开(我将所有内容合并)这是我的表单的 CSS:

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <legend>Mr. Sosa:</legend>
        </div>
        <!-- panel preview -->
        <div class="col-sm-5">
            <h4>Add payment:</h4>
            <div class="panel panel-default">
                <div class="panel-body form-horizontal payment-form">
                    <div class="form-group">
                        <label for="concept" class="col-sm-3 control-label">Concept</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="concept" name="concept">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description" class="col-sm-3 control-label">Description</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="description" name="description">
                        </div>
                    </div> 
                    <div class="form-group">
                        <label for="amount" class="col-sm-3 control-label">Amount</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" id="amount" name="amount">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="status" class="col-sm-3 control-label">Status</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="status" name="status">
                                <option>Paid</option>
                                <option>Unpaid</option>
                            </select>
                        </div>
                    </div> 
                    <div class="form-group">
                        <label for="date" class="col-sm-3 control-label">Date</label>
                        <div class="col-sm-9">
                            <input type="date" class="form-control" id="date" name="date">
                        </div>
                    </div>   
        </div>
    </div>
</div>

你有什么想法吗？谢谢

应用程序.css.scss

#banner {

  background: #9c9;

  padding: 10px;

  border-bottom: 2px solid;

  font: small-caps 40px/40px "Times New Roman", serif;

  color: #282;

  text-align: center;



  img {

    float: left;

  }

}



#notice {

  color: #000 !important;

  border: 2px solid red;

  padding: 1em;

  margin-bottom: 2em;

  background-color: #f0f0f0;

  font: bold smaller sans-serif;

}



#columns {

  background: #141;



  #main {

    margin-left: 17em;

    padding: 4em;

    background: white;

  }



  #side {

    float: left;

    padding: 1em 2em;

    width: 13em;

    background: #141;



    ul {

      padding: 0;



      li {

        list-style: none;



        a {

          color: #bfb;

          font-size: small;

        }

      }

    }

  }

}

bootstrap_and_overrides.css

/*

  =require twitter-bootstrap-static/bootstrap



  Use Font Awesome icons (default)

  To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"

  =require twitter-bootstrap-static/fontawesome

  */

登录.css

    body, html {

        height: 100%;

        background-repeat: no-repeat;

    }



    h2 {

        font: small-caps 40px/40px "Times New Roman",serif;

        text-align: center

    }



    .card-container.card {

        margin-left: 310px;

        max-width: 370px;

        padding: 40px 40px;

    }



.card {

    background-color: #F7F7F7;

    /* just in case there no content*/

    padding: 20px 25px 30px;

    margin: 0 auto 25px;

    margin-top: 50px;

    /* shadows and rounded borders */

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    border-radius: 2px;

    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}





    .btn {

        font-weight: 600;

        height: 36px;

        -moz-user-select: none;

        -webkit-user-select: none;

        user-select: none;

        cursor: default;

    }







.profile-img-card {

    width: 96px;

    height: 96px;

    margin: 0 auto 10px;

    display: block;

    -moz-border-radius: 50%;

    -webkit-border-radius: 50%;

    border-radius: 50%;

}

Answer 1

尝试使用 normalize.css 和 reset.css，看看是否有所不同。还要转到您的浏览器并检查表单容器上的元素，看看它从哪里获取对齐属性？(这将帮助您确定应用样式的位置，因此您可以先尝试在浏览器本身中调整它)