相关疑难解决方法(0)

我已经在当前的bootstrap 3上遇到了这样的问题一段时间了.我已经成功地以某种方式解决了这些问题,但是这次不知道如何修复它们.

我需要ul通过交替使用pull-left&pull-right列表项来创建一列中的两列.我究竟做错了什么？

http://bootply.com/92446

这里是问题的证明.

http://www.vcn.bc.ca/~dugan/css3/newhtml.html

多列CSS3布局在Firefox中正确显示.Opera和IE8将它显示为一列(很好).但是,Chrome会尝试将其显示为多个列,并切断部分文本.

有没有办法让它适用于Chrome？

我手上有一个HTML布局拼图.我有一个由我的PHP应用程序生成的大型字母列表,我需要在网页上输出它.生成的标记如下所示:

<div class="list_item">A</div>
<div class="list_item">B</div>
<div class="list_item">C</div>
<div class="list_item">D</div>
<div class="list_item">E</div>
<div class="list_item">F</div>
<div class="list_item">G</div>
<div class="list_item">H</div>
...

样式表如下所示:

.list_item {
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;

    width: 200px;
    float: left;
}

渲染结果:

正如你所看到的,这不是很易读,我希望DIV可以输出两列,所以第一列包含"ABC D",第二列包含"EFG H".

有没有办法在不更改标记的情况下执行此操作？为偶数和奇数div添加不同的类是可能的,但由于div是在循环中输出的,因此不能以不同的方式对它们进行拆分.

观看演示:http://jsfiddle.net/KZcCM/

注意:我已经通过PHP将列表拆分为两部分来解决它,但我想知道,如果这里有HTML/CSS解决方案.

我正在创建一个表单,我有一个侧面导航栏.我有大约15-20个元素要显示.我想要<li>二合一.每个都<li>包含一个模态的链接.当<li>被点击时,一个模式打开.

这就是我写的:

<div id="sidebar-wrapper">
      <ul class="sidebar-nav">
         <h4 class="sidebar-brand">Select Field Type</h4>
         <li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
         <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>
         <li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li>
         <li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
         <li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li>
         <li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li>
         <li><a href="#" …