Bootstrap-自動擴展包含內容的容器，行和行列的寬度

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 。 我沒有設法正確加載引導程序，所以我添加了一些CSS以復制引導程序.col-md-6行為。 我基本上在空白項目中添加了空白：nowrap。 並且還啟用了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;
}