0

在我现有的 css 中,我有 box-sizing 样式。

*,
*:before,
*:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }

将引导程序包括到项目中我知道使用引导程序显示输入框和图标是不正确的。通过提琴手调查我才知道这是因为上述风格。请参阅引导样式的显示:

在 IE 中:
在此处输入图像描述

在 FF 中:
在此处输入图像描述

下面是我使用引导样式的 html 代码:

 <div class="input-prepend" style="border:dashed 1px;">
        <i class="icon-calendar"></i>
        <input id="handle" type="text" placeholder="Twitter Handle">        
    </div>

Start date
    <div class="input-append date" id="dpFrom"  data-date="@Model.StartDate.ToString("dd/MM/yyyy")"  data-date-format="dd/mm/yyyy">
        <input class="span2" size="16" value="@Model.StartDate.ToString("dd/MM/yyyy") " readonly="readonly" type="text">
        <span class="add-on" style="border: dashed 1px red;"><i class="icon-calendar"></i></span>
    </div>

我的发现

我尝试删除盒子大小的样式并修复了引导程序,但还有另一个问题。我开始在我的网页中获得水平滚动条。

我对 css 有一点了解,但不幸的是我无法修复它,因为我 2 天前刚开始使用 Bootstrap。你能帮我解决这个问题吗?

非常感谢您的时间、指导和帮助。

4

2 回答 2

0

通过查看您的图片:这不是框大小问题,而是输入字段空间出现,因为不同的浏览器默认具有不同的样式。所以你应该尝试使用margin: 0; padding: 0;输入字段

定义高度也可能对您有所帮助。并为这些元素应用显示内联或内联块或表格单元格,并将其垂直对齐到顶部或中间。

于 2013-10-25T02:25:41.623 回答
0

这是装箱尺寸问题,对于某些字段,我必须将其设置为内容框。

于 2013-10-29T04:49:33.837 回答