twitter bootstrap 3 - Bootstrap3 - ensuring data grouped correctly in responsive grid -

-

i trying achieve following layout in bootstrap 3, converting old table based layout bootstrap's responsive grid:

label1a: value1a    label2: value2 label1b: value1b    label3: value3 label1c: value1c    label4: value4

with 1a through c being related data needs grouped together, in case address data, e.g.

address1: [data1]    contact:  joe bloggs town:     [data2]    position: developer

etc.

problem have @ smaller viewports want address data remain displayed in single section rather interspersed other data, i.e.

address1: [data1] town:  [data2] contact: joe bloggs position: developer

but coming out 

address1: [data1] contact: joe bloggs town:  [data2] position: developer

this not surprising given code:

                    <div class="row">                                                       <label for="address" class="control-label col-sm-2">address:</label>                                  <div class="col-sm-4"><%# databinder.eval(container.dataitem, "address1")%> <%# databinder.eval(container.dataitem, "address2") %></div>                                                       <label for="contact" class="control-label col-sm-2">contact:</label>                                  <div class="col-sm-4"><%# databinder.eval(container.dataitem, "name")%></div>                                                                       </div>                           <div class="row">                              <label for="town" class="control-label col-sm-2">town:</label>                                  <div class="col-sm-4"><%# databinder.eval(container.dataitem, "address3")%></div>                              <label for="position" class="control-label col-sm-2">position:</label>                                  <div class="col-sm-4"><%# databinder.eval(container.dataitem, "position")%></div>                                               </div>

this must common scenario simple. can workaround , change layout know how best achieve in bootstrap. thanks.

you can using row 2 columns. 1 column address info, other column remaining info.

then using bootstrap's built in form layout, can have text drop below label automatically on mobile devices.

here's example bootply: http://www.bootply.com/l2lxfk0bcv

<div class="row">   <div class="col-sm-6 form-horizontal">     <div class="form-group">       <label class="control-label col-sm-2">address 1</label>       <div class="col-sm-10">         <p class="form-control-static">123 main st</p>       </div>     </div>     <div class="form-group">       <label class="control-label col-sm-2">town</label>       <div class="col-sm-10">         <p class="form-control-static">london</p>       </div>     </div>   </div>   <div class="col-sm-6 form-horizontal">     <div class="form-group">       <label class="control-label col-sm-2">contact</label>       <div class="col-sm-10">         <p class="form-control-static">joe bloggs</p>       </div>     </div>     <div class="form-group">       <label class="control-label col-sm-2">position</label>       <div class="col-sm-10">         <p class="form-control-static">developer</p>       </div>     </div>   </div> </div>

Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more