Question

我有以下html：

<div class="container">
 <div class="row">
    <div class="col-md-6">
        <ul>
            <li>Long Content 1<li>
        </ul>
    </div>
    <div class="col-md-6">
        <ul>
            <li>Long Content 2<li>
        </ul>
    </div>
 </div>
</div>

我将在每个 ul 元素中添加动态内容。我希望 col-md - * 元素及其父元素与内容水平扩展，即使它们水平溢出屏幕窗口。我不介意屏幕上的水平滚动。我怎样才能做到这一点？

Answer 1

您可以使用css的display:inline-block属性作为li。请参阅以下示例：

ul li{
display:inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
 <div class="row">
    <div class="col-md-6">
        <ul>
            <li>Long Content 1<li>
            <li>Long Content 1<li>
            <li>Long Content 1<li>
            <li>Long Content 1<li>
            <li>Long Content 1<li>
            <li>Long Content 1<li>
            <li>Long Content 1<li>
            <li>Long Content 1<li>
            <li>Long Content 1<li>
        </ul>
    </div>
    <div class="col-md-6">
        <ul>
            <li>Long Content 2<li>
            <li>Long Content 2<li>
            <li>Long Content 2<li>
            <li>Long Content 2<li>
            <li>Long Content 2<li>
            <li>Long Content 2<li>
            <li>Long Content 2<li>
            <li>Long Content 2<li>
            <li>Long Content 2<li>
            <li>Long Content 2<li>
        </ul>
    </div>
 </div>
</div>

Answer 2

将container替换为container-fluid

Answer 3

这将强制元素永远不会包装文本，并应该有助于你正在寻找的东西。

li{white-space:nowrap}

您可能需要将li元素更改为display：block

Answer 4

我一直在玩这个。我最终得到了这个：JSFiddle。我没有设法正确加载bootstrap所以我添加了一些css来复制bootstrap .col-md-6行为。我基本上添加了white-space：nowrap到li-items。并且还启用了div上的垂直滚动。我想这将是你想做的事情。

<强> HTML

<div class="container">
 <div class="row">
    <div class="col-md-6 scrollbox">
        <ul>
            <li>Long Content 1 nkjdfhkjfh dskjfhdkjs hkjdsh fkjdshkjf hdkjshf kjh fkdsk fjhkj dhfkjshfkj das fdkjsfkjdsfkj hks fkadsj f last word<li>
        </ul>
    </div>
    <div class="col-md-6 scrollbox">
        <ul> 
            <li>Long Content 2<li>
        </ul>
    </div>
 </div>
</div>

<强> CSS

li{
 white-space: nowrap;
}
/*col-md-6 code is to simulate bootstrap*/
.col-md-6{
  width: 50%;
  float: left;
}
.scrollbox{
  background-color: rgb(200,200,220);
  overflow-x: auto;
  overflow-y: auto;
}

Bootstrap - 自动扩展容器，行和放大器行列的宽度与内容

4 个答案: