css - Bootstrap - Grid Layout of List Items -


i have web page in i'm using bootstrap 3. in page, want have list of 4 panels place in 2x2 grid. want grid looks this:

+-----+-----+ |  1  |  2  | |   |  b  | +-----+-----+ |  3  |  4  | |  c  |  d  | +-----+-----+

i want grid styled list-group though. styled, mean have border stylings , internal padding list-group item. not want single column of items. while i've been able close shown in bootply, it's not quite there. there still blank line between first , second rows in grid. but, if rid of blank line, borders between rows don't correct. in addition, i'm not sure if should use width:50% i'm using.

my code in question looks this:

<div class="container">   <div class="list-group list-group-horizontal block" style="width:100%;">     <div class="list-group-item" style="width:50%;">       <h4>portion 1</h4>       <h4><small>this description</small></h4>     </div>     <div class="list-group-item" style="width:50%;">       <h4>portion 2</h4>       <h4><small>this description</small></h4>     </div>   </div>   <div class="list-group list-group-horizontal block" style="width:100%;">     <div class="list-group-item" style="width:50%;">       <h4>portion 3</h4>       <h4><small>this description</small></h4>     </div>      <div class="list-group-item" style="width:50%;">       <h4>portion 4</h4>       <h4><small>this description</small></h4>     </div>   </div> </div>

what doing incorrect in approach layout?

you can use regular list-group. use css remove unwanted rounded corners , position 2 list-groups next each other

see below snippet or bootply: http://www.bootply.com/iyq8a9nvzq

.my-list-group {      width: 50%;      display: inline-block;  }      .left .list-group-item {    border-top-right-radius: 0px;    border-bottom-right-radius: 0px;  }    .right {    float: right;  }        .right .list-group-item {    border-top-left-radius: 0px;    border-bottom-left-radius: 0px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container">    <div class="list-group my-list-group left">      <div class="list-group-item">        <h1>item 1</h1>        <p>sub</p>      </div>      <div class="list-group-item">        <h1>item 3</h1>        <p>sub</p>      </div>    </div>    <div class="list-group my-list-group right">      <div class="list-group-item">        <h1>item 2</h1>        <p>sub</p>      </div>      <div class="list-group-item">        <h1>item 4</h1>        <p>sub</p>      </div>    </div>


-

Comments

Post a Comment

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri
Read more

matplotlib support failed in PyCharm on OSX -

any idea how fix ? how can debug might problem ? not seem : https://youtrack.jetbrains.com/issue/py-15520 i in console: python 2.6.9 (unknown, jul 14 2015, 19:46:31) [gcc 4.2.1 compatible apple llvm 6.0 (clang-600.0.39)] on darwin >>> import matplotlib.pyplot plt matplotlib support failed the backend : >>> import matplotlib >>> print(matplotlib.rcparams['backend']) macosx
Read more

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -

i new programming please pardon me if rookie mistake. i writing python script have defined functions create subplots of distributions. i have slider widget end user change value of variables(mu , sigma) , see effect on distribution. here's code import numpy np print np.__version__ import scipy print scipy.__version__ scipy.stats import norm, lognorm, uniform import matplotlib print matplotlib.__version__ import matplotlib.pyplot plt matplotlib.widgets import slider, button, radiobuttons, checkbuttons #####calculating mean , standard deviation##### global mu_a1 mu_a1 = 1 global mu_b1 mu_b1 = 10 global mu_c1 mu_c1 = -13 global sigma_a1 sigma_a1 = 0.14 global sigma_b1 sigma_b1 = 1.16 global sigma_c1 sigma_c1 = 2.87 mu_x01 = -11 sigma_x01 = 1.9 #####_____##### #####generating random data##### a1 = 0.75*mu_a1 + (1.25 - 0.75)*sigma_a1*np.random.sample(10000) b1 = 8*mu_b1 + (12 - 8)*sigma_b1*np.random.sample(10000) c1 = -12*mu_c1 + 2*sigma_c1*np.random.sample(10000)
Read more