Bootstrap CSS错位

所以,我下载了bootstrap,并有以下代码。

<header id="top">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 ">
                    <image alt="here will be the logo" src=""></image>
                </div>
                <div  class="col-sm-6 ">

                </div>
                <div class="col-sm-3">
                    <form class="form-horizontal" >
                    <div class="form-group row">
                    <label class="control-label col-sm-4" for="document">Document:</label>
                    <div class="col-sm-8">
                      <input type="email" class="form-control" id="document" placeholder="document">
                    </div>
                    </div>
                    <div class="form-group row">
                    <label class="control-label col-sm-4" for="revision">Revision:</label>
                    <div class="col-sm-8">
                      <input class="form-control" id="revision" placeholder="revision">
                    </div>
                    </div>
                    <div class="form-group row">
                    <label class="control-label col-sm-4" for="pagenr">Page nr:</label>
                    <div class="col-sm-8">
                      <input class="form-control" readonly = "true" id="pagenr" placeholder="here will be page number">
                    </div>
                    </div>
                    <div class="form-group row">
                    <label class="control-label col-sm-4" for="iso">ISO:</label>
                    <div class="col-sm-8">
                      <input class="form-control" id="iso" placeholder="iso">
                    </div>
                    </div>
                    </form>

这是我得到的结果。网页 现在我感兴趣的是:1.表单中文本的对齐方式(由于某种原因,标签的位置高于输入)和2.巨大的右边距,无论我怎么做都不会消失,而且会吃掉输入空间。另外,有趣的是,将输入栏设置为’readonly’,使得它永远是灰色的。”这是我的css代码。

input.form-control{
    width: 80%;
    padding: 15px 22px;
    margin: 5px 5px;
    box-sizing: border-box;  
    font-size: 14px;
    height: 10px;
    border:0;
    background-color: #FFEBCD;
}
header {
    padding-top: 20px;  
    height: 100px;
    font-size: 14px;
}
div.container
{
    margin-right: 1px;
    margin-left: 100px;
    padding-right: 1px;
    border-right: 1px;
}
div.form-group
{
    margin-right: 1px;
    padding-right: 1px;
    border-right: 1px;
}
form.form-horizontal
{
    margin-right: 1px;
    padding-right: 1px;
    border-right: 1px;
    vertical-align: bottom;
}
div.row
{
    margin-right: 1px;
    padding-right: 1px;
    border-right: 1px;
}
label.control-label
{
    width: 100%;
    vertical-align: baseline ;
    background-color: CadetBlue;
    text-align: left;
}

所以,垂直或文本对齐属性似乎都没有工作,也没有设置为 “只读”。'right margin' = 1px 到任何我能想到的元素.我提供的Html代码只涵盖了第一种形式,因为整个代码将只是两倍大,问题显然是相同的第二种形式。

解决方案:

我已经编辑了他们的代码。希望是你想要的方式。这真的是复杂的写法。

  <header id="top">
    <div class="container">
      <div class="row">
        <div class="col-sm-4 ">
          <image alt="here will be the logo" src=""></image>
        </div>
        <!-- <div class="col-sm-6 ">

        </div> -->
        <div class="col-sm-8">
          <form>
            <div class="form-group row">
              <label class="col-form-label col-sm-2" for="document">Document:</label>
              <div class="col-sm-10">
                <input type="email" class="form-control " id="document" placeholder="document">
              </div>
            </div>
            <div class="form-group row">
              <label class="control-label col-sm-2" for="revision">Revision:</label>
              <div class="col-sm-10">
                <input class="form-control" id="revision" placeholder="revision">
              </div>
            </div>
            <div class="form-group row">
              <label class="control-label col-sm-2" for="pagenr">age nr:</label>
              <div class="col-sm-10">
                <input class="form-control" id="pagenr" placeholder="here will be page number">
              </div>
            </div>
            <div class="form-group row">
              <label class="control-label col-sm-2" for="iso">ISO:</label>
              <div class="col-sm-10">
                <input class="form-control" id="iso" placeholder="iso">
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    </div>
  </header>

给TA打赏
共{{data.count}}人
人已打赏
未分类

需要一种方法来覆盖两个不同的pandas数据框中的列。

2022-9-13 14:40:23

未分类

在Expss表中使用用户定义的函数动态传递参数。

2022-9-13 14:40:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索