Bootstrap-自动扩展包含内容的容器，行和行列的宽度

Question

I have following 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>

I will be adding dynamic content into each ul element. I want col-md-* elements and their parents to expand themselves horizontally with the content, even if they horizontally overflow the screen window. I don't mind horizontal scrolling on the screen. How can I achieve this?

Answer 1

You can use the display:inline-block property of css for the li. Please see the example below:

 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

This will force the element to NEVER wrap text and should help with what you're looking for.

li{white-space:nowrap}

You may need to change the li element to display:block as well

Answer 4

I have been playing around with this a bit. I ended up with this: JSFiddle . I didn t manage to get bootstrap loaded properly so I added in some css to replicate the bootstrap .col-md-6 behavior. I basically added white-space: nowrap to the li-items. And also enabled vertical scrolling on the divs. I figured that would be about what you wanted to do.

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;
}