为什么我的Divs不能自动调整位置？

使用jQuery，
我有一组四个突起的那个开始是这样的：为什么我的Divs不能自动调整位置？

<ul class="tabs"> 
    <li> 
     <input type="radio" name="tabs" id="tab1" checked /> 
     <label for="tab1">Item One</label> 
     <div id="tab-content1" class="tab-content"> 
      <p>Text Here </p> 
     </div> 
    </li> 
</ul>

在台式它看起来期望。但在移动设备上，当屏幕缩小时，其他选项卡会崩溃（它们应该是），但div内的文本不会自动调整。这会将其他选项卡留在可见文本后面。

有什么办法解决这个问题吗？

谢谢

有关完整的代码里发现的jsfiddle页：中.tabs li 在你的CSS https://jsfiddle.net/hesbwgsm/2/

来源

2016-08-01 Arges86

你为什么不出去引导'tabs' [引导选项卡和丸（http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp） – jonju

你自由安排您的标记等比你发布？你能收集另一个div中的所有tab-conten-div吗？或者您必须使用您发布的代码？ –

@jonju我尝试使用Bootstrap（我在整个网站中使用它）。但在风格上，我永远不会看起来恰到好处。我不喜欢默认的配色方案，并且我尝试改变某些颜色等，结果出乎意料。 – Arges86

bacause，.tabswidth: 75%但li其中ul内你不给它任何宽度

将此替换为您的

.tabs li { 
    float: left; 
    display: block; 
    width: 25%; 
}

来源

2016-08-01 20:43:57 knizer

为什么我的Divs不能自动调整位置？

回答

相关问题