Question

我想在小屏幕上将我的列表项分成两列，但它必须在md屏幕上的一列中

<div> 
    <ul>
       <li> List Item 1 </li>
       <li> List Item 2 </li>
       <li> List Item 3 </li>
       <li> List Item 4 </li> 
   </ul>
</div>

我想打破第3项中的清单项目，第4项必须显示在小屏幕上项目1前面的第二列中输出应该是

列出项目1列表项目-4
列出项目2
列出项目3

Answer 1

尝试以下代码

＆＃13;

:hover

＆＃13;

.clear-left {
  clear: left
}
.clear-right {
  clear: right
}
ul {
  padding: 0 !important;
  margin: 0 !important;
}
li {
  padding: 10px;
  border: 1px solid #aaa;
  background: rgba(0, 0, 0, 0.07);
  list-style-type: none;
}
.block-1 {
  background: rgba(0, 0, 0, 0.05);
}
.block-2 {
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.05);
}

＆＃13;

Answer 2

使用以下代码：

<?php
if(isset($_POST["fdate"])) {
   echo $_POST["fdate"]; //for firstdate
}
if(isset($_POST["ldate"])) {
    echo $_POST["ldate"]; //for lastdate
}
?>

CSS：

<div class="row">
      <ul class="col-md-12 col-sm-6 firstCol">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
      <ul class="col-md-12 col-sm-6 secondCol">
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
</div>

Answer 3

请试试这个

<ul class="row">
  <li class="col-md-3 col-xs-4">
    List Item 1
  </li>
  <li class="col-md-3 col-xs-4">
    List Item 2
  </li>
  <li class="col-md-3 col-xs-4">
    List Item 3
  </li>
  <li class="col-md-3 col-xs-4">
    List Item 4
  </li>
</ul>

演示：http://codepen.io/anon/pen/adReKN

在bootstrap的小屏幕上的两列中打破列表项

3 个答案: