Question

我想把div放在一起。我曾尝试使用float: left等，我也在使用bootstrap，但是我已经尝试了列设置，但它不起作用，

HTML：

<div class="container">
    <div class="Mainbody2">
        <div class="ref1">
            <h2>About</h2>
            <p>Text GOES HERE</p>
            <h2>Statement!</h2>
            <p>STATMENT GOES HERE</p><br />
            <br />
            <br />
            <h2>Number1</h2>
            <ul>
                <li>link1</li>
                <li>link1</li>
                <li>link1</li>
                <li style="list-style: none"><br /></li>
                <li>link1</li>
                <li>link1</li>
                <li>link1</li>
                <li style="list-style: none"><br /></li>
            </ul>
        </div>

        <div class="ref2">
            <h2>Description</h2>
            <ul>
                <li>link2</li>
                <li>link2</li>
                <li>link2</li>
                <li style="list-style: none">
                    <br />
                    <h2>Libraries</h2>
                </li>
                <li>link2</li>
                <li>link2</li>
                <li>link2</li>
            </ul>
        </div>
    </div>
</div>

链接到Fiddle

只是为了说清楚我想要获得数字1旁边的描述，然后是描述旁边的库

再次感谢您的帮助

Answer 1

将md和sm添加到div <div class="col-lg-2 col-md-2 col-sm-2">

    <div class="container">
                    <div class="Mainbody2">
                 <div class="col-md-2 col-sm-2 col-xs2">            
                   <h2>About</h2>
               <p>Text GOES HERE  </p>
                  <h2>Statement!</h2>
              <p>
                 STATMENT GOES HERE
              </p>
              <br />  <br />  <br />
             <h2>Number1</h2>
               <li> link1</li>
               <li> link1</li>
               <li> link1</li>
              <br />
               <li> link1</li>
             <li> link1</li>
           <li> link1</li>
             <br />
           </div>
           <div class="col-md-2 col-sm-2 col-xs2">
             <h2>Description</h2>
           <li> link2</li>
           <li> link2</li>
           <li> link2</li>
           <br />
             <h2>Libraries</h2>
           <li> link2</li>
           <li> link2</li>
            <li> link2</li>
                 </div>
        </div>  
  </div>

请参阅js fiddle http://jsfiddle.net/vrupp3wr/

根据需要设置合适的颜色

Answer 2

请参阅此fiddle

我已经改变了你的HTML，如下所示

<div class="container">
  <div class="Mainbody2">
    <div class="ref1">
      <div class="left">
        <h2>About</h2>
        <p>Text GOES HERE </p>
        <h2>Statement!</h2>
        <p>
          STATMENT GOES HERE
        </p>
      </div>
      <div class="right">
        <h2>Description</h2>
        <li> link2</li>
        <li> link2</li>
        <li> link2</li>
      </div>
    </div>
    <div class="ref2">
      <div class="left">
        <h2>Number1</h2>
        <li> link1</li>
        <li> link1</li>
        <li> link1</li>
        <br>
        <li> link1</li>
        <li> link1</li>
        <li> link1</li>
      </div>
      <div class="right">
        <h2>Libraries</h2>
        <li> link2</li>
        <li> link2</li>
        <li> link2</li>
      </div>
    </div>
  </div>
</div>

另外，添加了以下CSS

.left,
.right,.ref1,.ref2 {
  float: left;
}
.ref1,.ref2{

  padding:10px;
  width:100%;
}
.left,.right{
  width:50%;
}

Answer 3

你尝试过这样的事吗？

<div class="row">
    <div class="col-md-4">column 1</div>
    <div class="col-md-4">column 2</div>
    <div class="col-md-4">column 3</div>
</div>

使用Bootstrap，您必须将一个div指定为一行，嵌套的div可以是列。

Answer 4

this works for me
<div class="row">
    <div class="col-xs-6">
        <div class="panel">
            <fieldset>
                <legend>Legend</legend>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                        Option one
                    </label>
                </div>
            </fieldset>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="panel">
            <fieldset>
                <legend>Legend</legend>
                <div class="form-group">
                    <label for="exampleInputEmail">
                        Email address</label>
                    <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
                </div>
            </fieldset>
        </div>
    </div>
</div>

如何将div浮动到下一个

4 个答案:

请参阅此fiddle